Проверка не запускается при добавлении пользовательского FormControl в FormArray - PullRequest
Новая
       56

Проверка не запускается при добавлении пользовательского FormControl в FormArray

0 голосов
/ 13 февраля 2020

У меня есть группа форм, которая имеет массив пользовательских элементов управления формой (пользовательский элемент управления формы также имеет проверку). Всякий раз, когда я помещаю sh новый элемент управления формы в массив, проверка для полной формы не выполняется должным образом.

Кажется, что при нажатии нового элемента управления формы запускается проверка для родительского элемента управления формы Сначала выполняется проверка только для дочернего элемента управления формы. У кого-нибудь есть идеи относительно того, почему?

Пожалуйста, обратитесь к ссылке на stackblitz по адресу https://stackblitz.com/edit/angular-fh6vzw?embed=1&file=src / app / app.component.ts

1 Ответ

0 голосов
/ 14 февраля 2020

Вам нужно сделать выдох Angular, просто в вашей функции onAddHero добавьте setTimeout (() => heroesArray.updateValueAndValidity () 

onAddHero() {
    const heroesArray = this.formGroup.get('heroes') as FormArray;
    heroesArray.push(new FormControl({
      name: '',
      wealth: ''
    }));
    //this lines
    setTimeout(()=>{
        heroesArray.updateValueAndValidity()
    })
    console.log('hero added');
  }

Кстати, я думаю, что это "странно" "способ сделать вещи, для меня проще создать компоненты с @Input и @Ouput и управлять формой из app.component

Это наш app.component 

<form [formGroup]="newForm" (submit)="onSubmit()">
    <div class="form-group">
        <label>Collection name<input formControlName="collectionName" class="form-control" /></label>
    </div>
    <app-comic-book [form]="newForm.get('comicBook')" (addHero)="addHero()"></app-comic-book>
    <button type="submit" [disabled]="!newForm.valid" class="btn btn-primary">Submit</button>
</form>
  newForm: FormGroup = this.fb.group({
    collectionName: 'classics 1',
    comicBook: this.fb.group({
      name: 'volume 1',
      heroes: this.fb.array([
        this.createHeroe({
          name: 'Superman',
          wealth: 'Piss poor'
        }),
        this.createHeroe({
          name: 'Batman',
          wealth: 'Crazy rich'
        })
      ])
    })
  });

  constructor(private fb: FormBuilder) { }

  createHeroe(data)
  {
    data=data || {name:'',wealth:''}
    return this.fb.group({
      name:[data.name,Validators.required],
      wealth:[data.wealth,Validators.required]
    })
  }
  addHero()
  {
    const heroes=this.newForm.get('comicBook.heroes') as FormArray;
    heroes.push(this.createHeroe(null))
  }
  onSubmit() {
    console.log(this.newForm);
  }

Наш коми c -book.component 

<div [formGroup]="formGroup">
    <div class="form-group">
        <label>Comicbook name<input formControlName="name" class="form-control" /></label>
    </div>
    <div formArrayName="heroes">
        <div *ngFor="let hero of formGroup.get('heroes').controls; let i = index">
            <app-hero [form]="hero"></app-hero>
        </div>
    </div>
  <button (click)="onAddHero()" class="btn btn-primary">Add Hero</button>
</div>

export class ComicBookComponent {
  @Input('form')formGroup
  @Output()addHero = new EventEmitter<any>();
  onAddHero()
  {
    this.addHero.emit()
  }
}

И наш герой-компонент 

<div [formGroup]="formGroup">
    <div class="form-group">
        <label>Hero name<input formControlName="name" class="form-control" /></label>
    </div>

    <div class="form-group">
        <label>Hero wealth<input formControlName="wealth" class="form-control" /></label>
    </div>
</div>

export class HeroComponent  {
  @Input('form')formGroup
}
...