FormArray при нажатии кнопки сохранения не отображает ошибку мат - PullRequest
Новая
       7

FormArray при нажатии кнопки сохранения не отображает ошибку мат

0 голосов
/ 09 декабря 2018

У меня есть кнопка сохранения вне формы.при нажатии кнопки сохранения я хочу отобразить mat error.Но это не отображается.Я пытался использовать this.form.markAsDirty() & this.form.markASTouched(), но ничего не работает. 

<form [formGroup]="form">
 <div formArrayName="products" *ngFor="let product of form.get('products').controls; let i = index;">
  <div [formGroupName]="i">
    <mat-form-field>
      <input type="text" formControlName="productCode">
      <mat-error>
          Blank Error
      </mat-error>
    </mat-form-field>
    <mat-form-field>
      <input type="text" formControlName="productName">
      <mat-error>
          Blank Error
      </mat-error>
    </mat-form-field>
   </div>
  </div>
<form>
<div>
   <button type="button" (click)="SaveProducts()">Save</button>
</div>

angular code:

addProduct() {
  this.form.get('products').push(this.getProductGroup())
}

SaveProducts() {
  this.form.markAsDirty();
  this.form.markAsTouched();
  if(this.form.valid) {
     //save products
  }
}

1 Ответ

0 голосов
/ 09 декабря 2018

Маркировка всего FormGroup как touched не приведет к тому, что его дети будут тронуты.Это то, что вам придется делать явно, так как Angular не собирается делать это неявно.Прочитайте эту ветку для получения дополнительной информации об обосновании этого.

При этом вы можете явно вызывать markAsTouched для каждого FormControl в каждом FormGroup в 'products' FormArray.

Вот как: 

(<FormArray>this.form.get('products')).controls.forEach((group: FormGroup) => {
  (<any>Object).values(group.controls).forEach((control: FormControl) => { 
      control.markAsTouched();
  }) 
});

Вот Рабочий образец StackBlitz для вашегоref.

PS: я внес еще несколько изменений в mat-error s, чтобы они отображались только тогда, когда FormField s touched и недействительны.Кроме того, идеальным пользовательским интерфейсом было бы disable кнопка Сохранить в первую очередь.И покажите пользователю ошибку, когда они касаются полей.Кроме того, маркировка полевых меток как обязательная (*) может рассматриваться как хороший UX.

...