Angular Массив форм, валидаторы и ошибки - PullRequest
Новая
       65

Angular Массив форм, валидаторы и ошибки

0 голосов
/ 09 июля 2020

У меня есть основная форма, в которую встроена подчиненная форма formArray:

Основная форма 

  initForm() {
    this.mainForm = this.formBuilder.group({
        label: ['', [Validators.required, Validators.maxLength(this.labelMaxLength)]],
    foos: this.formBuilder.array([], [MyCustomValidator])
    });
  }

Компонент вспомогательной формы 

  initForm() {
    this.subForm = this.formBuilder.group({
        id: '',
        start: ['1', [Validators.required, Validators.min(1)]],
        stop: ['5', [Validators.required, Validators.min(2)]],
    });
  }


<input nbInput type="number"status="{{ (f.start.errors && f.start.touched) ? 'danger': (!f.start.errors && f.start.touched) ? 'success' : 'basic' }}"
    id="start" class="form-control" formControlName="start" />
<div *ngIf="f.start.touched && f.start.errors" class="invalid-feedback d-block">
    <div *ngIf="f.start.errors['required']">{{ 'FIELD_REQUIRED' | translate: {field: 'LAYERSTART' | translate} }}</div>      
    <div *ngIf="f.start.errors['min']">{{ 'MINERROR' | translate: {valuemin: '1' } }}</div>
</div>              
//FORM IS INVALID BUT ERRORS ARE NOT DISPLAYED

У меня также есть собственный Валидатор, в котором я устанавливаю такие ошибки: 

formArray.controls[index].setErrors({myControlError: true});

formArray.setErrors({ arrayLevelError: true });

И в моей основной форме html

<div>
<div *ngIf="f.foos.errors" class="invalid-feedback d-block">
    <div *ngIf="f.foos.errors['arrayLevelError']">BLALA/div>       //NOT WORKING
</div>
<ng-container formArrayName="foos" *ngFor="let ctr of foos.controls; let i=index">
    <div *ngIf="ctr.errors" class="invalid-feedback d-block">
        <div *ngIf="ctr.errors['myControlError']">BLOLO</div>
    </div>                                  
    <ngx-foo id="foo_{{ i }}" [formControlName]="i" [inErrors]="ctr.errors">
    </ngx-foo>
</ng-container>
<div>

Ошибки управления работают, а вот arrayLevelError - нет, кроме того, валидаторы внутри подкомпонент работает (подчиненная форма недействительна), но не отображается.

Как я могу получить к ним доступ для других типов ошибок?

Спасибо за вашу помощь

...