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

Question

Упрощенный сценарий состоит в том, что в моей форме у меня есть два поля - 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, не включив ее?

Answer 1

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

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

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

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

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

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

getRawValue (): any;