Добавить проверку в поле отключенного материала Angular

Упрощенный сценарий заключается в том, что в моей форме у меня есть два поля - A и B.

Поле A обязательно и включено. Поле B также требуется, но отключено и заполняется (динамически) только в результате ввода данных в поле A, и, как это бывает в некоторых случаях, B может быть разрешено как NULL.

Пользователь не должен иметь возможность отправить форму, если оба поля не заполнены, поэтому мне нужно добавить требуемую проверку в поле B (отключено/заполняется динамически).

Хотя требуемая проверка отлично работает для включенных полей, кажется, что она игнорируется для отключенных полей.

<mat-form-field>
  <input name="FieldA" matInput formControlName="FieldA" placeholder="Field A" [maxLength]="6">
  <mat-error *ngIf="formErrors.FieldA">{{ formErrors.FieldA }}</mat-error>
</mat-form-field>

<mat-form-field>
  <input name="FieldB" matInput formControlName="FieldB" placeholder="Field B">
  <mat-error *ngIf="formErrors.FieldB">{{ formErrors.FieldB }}</mat-error>
</mat-form-field>


buildForm() {
  this.form = this.form.group({
      FieldA: ['', [Validators.required]],
      FieldB: [{ value: '', disabled: true }, [Validators.required]],
  });

Можно ли как-нибудь добавить проверку в FieldB в HTML, не включая ее?


angular validation angular-material disabled-input
person tom33pr    schedule 05.02.2019    source источник
comment
stackoverflow.com/questions/54522845 /?   -  person Eliseo    schedule 05.02.2019

Ответы (1)


arrow_upward
6
arrow_downward

Вместо disabled используйте readonly. Разница между этими двумя атрибутами заключается в том, что поля disabled игнорируются при отправке формы, а поля readonly включаются при отправке. К сожалению, angular не поддерживает параметр только для чтения при использовании подхода Reactive Forms, но вы можете легко сделать это, используя привязку свойств:

<input type="text" formContolName="FieldB" [readonly]="isReadonly">

Другой вариант — включить это поле программно при отправке функции (перед вызовом отправки).

РЕДАКТИРОВАТЬ: вы также можете получить значения, помеченные как отключенные элементы управления, вызвав this.form.getRawValue();

Из комментария исходного кода:

/**
* Суммарное значение FormGroup, включая все отключенные элементы управления.
*
* Если вы хотите включить все значения независимо от статуса отключения, используйте этот метод.
* В противном случае , свойство value — лучший способ получить значение группы.
*/

получитьRawValue(): любой;

person XardasLord    schedule 05.02.2019
comment
[readonly] = true всегда запускает проверку, даже если поле было заполнено данными... - person tom33pr; 05.02.2019
comment
Если вы добавите [readonly]="true", а поле B будет иметь Validation.Required, оно проверит поле при отправке формы, как вы ожидаете. - person XardasLord; 05.02.2019
comment
Проблема заключается в следующей настройке: ... FieldB: ['', [Validators.required]], ... ‹input class=disabled-font name=FieldB matInput formControlName=FieldB placeholder=Field B [value]=address [только для чтения]=true› ‹mat-error *ngIf=formErrors.FieldB›{{ formErrors.FieldB }}‹/mat-error› ... проверка ВСЕГДА запускается и показывает обязательное поле, даже если поле заполнено. .. Это ошибка? - person tom33pr; 05.02.2019
comment
Что такое formErrors? Это твой собственный класс? Как вы проверяете, действительно ли FieldB? Я имею в виду, как вы присваиваете значение formErrors.FieldB? - person XardasLord; 05.02.2019
comment
formErrors = { FieldA: '', FieldB: '' }; this.form.valueChanges.subscribe((data) =› { this.formErrors = this.formValidationService.validateForm(this.form, this.formErrors, true); }); [значение] = адрес присваивается в машинописном тексте в результате вызова веб-API при заполнении поля A. - person tom33pr; 05.02.2019
comment
И вы уверены, что этот вызов webAPI возвращает правильное значение для FieldB? - person XardasLord; 05.02.2019
comment
Абсолютно. Я вижу, что поле заполняется значением. Он доступен только для чтения, так что это хорошо, за исключением того, что он отображается красным цветом и выдается ошибка проверки, и я не могу продолжить. Спасибо, что заглянули в это BTW! - person tom33pr; 05.02.2019
comment
Это действительно странно, потому что отключенные входы считаются недействительными, а входы только для чтения — нет. formErrors.FieldB должно быть ложным... - person XardasLord; 05.02.2019
comment
Получил это работает. Перешел на [readonly] = true, как вы предложили, но затем пришлось дополнительно программно установить значение поля: this.form.get('FieldB').setValue(this.result); а не просто привязывать его в html к строке из кода позади: [value]=address Теперь это работает, спасибо - person tom33pr; 05.02.2019
comment
Пожалуйста, исправьте неправильное formContolName (отсутствует r), чтобы оно было formControlName. Очередь редактирования была заполнена, поэтому я не мог сделать это сам. - person Janos Vinceller; 02.12.2020