Как запустить проверку на FormArray? - PullRequest
Новая
       27

Как запустить проверку на FormArray?

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

У меня есть форма, которая содержит объект. В этом объекте у меня есть два «нормальных» атрибута и один массив форм. В моем случае мне нужно проверить, является ли объект полем объекта в массиве формы порт или portrange. Для этого у меня есть регулярное выражение. Но в моем случае проверка никогда не показывается (без красного поля ввода или ошибки с матом).

Машинопись 

this.myForm = this.fb.group({
      name: ['', [Validators.required, Validators.pattern('^[a-zA-Z0-9._-\\s]*$')]],
      description: ['', Validators.maxLength(255)],
      elements: new FormArray([this.createElement()])
    });
...
createElement(): FormGroup {
    return this.fb.group({
      'portRanges': ['', [Validators.required]],
      'protocol': ['',[Validators.required, Validators.pattern('^\d+$|^\d+-\d+$')]]
    });
}

<div formArrayName="elements" *ngFor="let e of elements.controls; let i = index;">
  <div [formGroupName]="i">
    <mat-form-field class="field">
      <input tabindex="3" matInput placeholder="Port or range *" formControlName="portRanges"/>
      <mat-error>Between 0 and 65535, or a range of two such numbers separated by a dash ( - )</mat-error>
    </mat-form-field>

    <mat-radio-group aria-label="Select a protocol" [ngStyle]="getStyle(e)" formControlName="protocol">
      <mat-radio-button value="TCP" tabindex="4">TCP</mat-radio-button>
      <mat-radio-button value="UDP" tabindex="5">UDP</mat-radio-button>
    </mat-radio-group>

    <div style="display: flex">
      <div>
        <div *ngIf="i === elements.controls.length - 1" style="margin-right: 5px;" class="action-btn" tabindex="6" (click)="addBlankElement()">
          <i class="material-icons">add_circle</i>
        </div>
      </div>
      <div *ngIf="elements.length > 1" class="action-btn remove-btn" tabindex="7" (click)="removeElement(i)">
        <i class="material-icons">remove_circle</i>
      </div>
    </div>
  </div>
</div>

Решено проверкой всех элементов после изменения значения: 

ngOnInit(){
  this.createForm();
  this.myForm.valueChanges.subscribe((data) => {
    this.validate(this.myForm);
  })
}

validate(group: FormGroup = this.myForm){
  this.elements.controls.forEach((data) => {
    data.updateValueAndValidity();
  })
}

1 Ответ

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

В этом случае вы должны использовать updateValueAndValidity для обновления проверки - 

this.myForm.get('name').updateValueAndValidity();
this.myForm.get('description').updateValueAndValidity();

, а затем 

this.myForm.updateValueAndValidity();
...