проверка не работает на formArray с несколькими элементами управления - PullRequest
Новая
       19

проверка не работает на formArray с несколькими элементами управления

0 голосов
/ 12 июня 2019

enter image description here Я работаю над списком mat-chip, в котором объявлен элемент управления formArray для ввода.

Текущее поведение: Когда я просто отправляю форму без заполнения каких-либо полей формы, список mat-chip-list не имеет никаких форм-контролов внутри него, но когда я печатаю formGroup, требуется: проверка правильности true, но красная рамка для поля mat-chio-list не отображается показывая.

Ожидаемое поведение: валидация формы должна отображаться для mat-chip-list с красной рамкой

Мои компоненты.ts: 

this.composeMailForm = new FormGroup({
  to_emails: new FormArray([], Validators.required),
  cc_emails: new FormControl(),
  bcc_emails: new FormControl(),
  from_email: new FormControl(),
  subject: new FormControl('', Validators.required),
  body: new FormControl('', Validators.required),
});

onSubmit(){
  console.log("form controls after submit",this.composeMailForm);
  if(this.composeMailForm.valid){
   ------------
   ------------
  }else{
    this.composeMailForm.controls.body.markAsTouched();
    const ctrls = this.composeMailForm.get('to_emails') as FormArray;
    ctrls.markAsTouched();
    ctrls.controls.forEach(control => control.markAsTouched());
    this.composeMailForm.controls.subject.markAsTouched();
  }

add(event: MatChipInputEvent, email_type): void {
  const input = event.input;
  const value = event.value;
  if ((value || '').trim()) {
    if(email_type === 'to_email'){
      const to_emails = this.composeMailForm.get('to_emails') as FormArray;
      to_emails.push(this.fb.control(value.trim()));
    }
  }
}

remove(index: number, email_type): void {
  if(email_type === 'to_email'){
    const to_emails = this.composeMailForm.get('to_emails') as FormArray;
    if (index >= 0) {
      to_emails.removeAt(index);
    }
  }
}

HTML: 

<mat-label>To</mat-label>
<mat-chip-list #chipList ngDefaultControl formArrayName="to_emails" >
  <mat-chip *ngFor="let email of composeMailForm.get('to_emails').controls; let i = index;" [selectable]="selectable" [removable]="removable"
                      (removed)="remove(i,'to_email')" ngDefaultControl >
 {{email.value}}
   <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
  </mat-chip>
  <input [matChipInputFor]="chipList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
                      [matChipInputAddOnBlur]="addOnBlur" (matChipInputTokenEnd)="add($event,'to_email')" >
</mat-chip-list>

Как этого добиться, Любая идея? Спасибо.

...