Angular Реактивная форма с динамическими c полями - PullRequest
Новая
       75

Angular Реактивная форма с динамическими c полями

0 голосов
/ 27 января 2020

В настоящее время я борюсь с Angular массивом форм.

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

Я создал объект формы: 

this.otherDataForm = this.fb.group({
});

Я добавляю динамические c поля вроде этого: 

addField(field: CustomFormField): void {
    this.otherDataForm.addControl(id_campo, new FormControl('', Validators.required));
}

I l oop через эти поля: 

<form *ngIf="selectedProfile" [formGroup]="otherDataForm">
      <div class="mb-3" *ngFor="let field of fields; let i = index">
           <label>{{field.descripcion}}</label>
           <input class="form-control" [formControlName]="field.id_campo" type="number">
      </div>
</form>

Но я не могу получить контроль над ошибками каждого поля, чтобы показать сообщение проверки, если поле является обязательным.

Кто-нибудь может мне помочь с этим? Может быть, есть лучший способ сделать это.

1 Ответ

0 голосов
/ 27 января 2020

ну, я чувствую себя более комфортно при использовании непосредственного управления конструктором formControl и formGroup 

fields=[{id:'one',label'one',value:1},{id:'two',label'two',value:2}]
form=new FormGroup({})
ngOnInit()
{
   this.fields.forEach(x=>{
    this.form.addControl(x.id,new FormControl(x.value,Validators.Required))
   })
}

<form [formGroup]="form">
    <div *ngFor="let field of fields">
        <input [formControlName]="field.id">
        <div class="error" *ngIf="form.get(field.id).touched &&
            form.get(field.id).invalid">Required</div>
    </div>
</form>
{{form?.value|json}}

Но вы можете использовать [formControl] непосредственно на входе 

<form [formGroup]="form">
    <div *ngFor="let field of fields">
    <label>{{field.label}}</label>
        <input [formControl]="form.get(field.id)">
        <div class="error" *ngIf="form.get(field.id).touched && 
             form.get(field.id).invalid">Required</div>
    </div>
</form>

Даже вы можете итерация по form.controls | keyvalue 

<form [formGroup]="form">
    <div *ngFor="let control of form.controls |keyvalue;let i=index">
    <label>{{fields[i].label}}</label>
    <input [formControl]="control.value">
        <div class="error" *ngIf="control.value.touched && 
               control.value.invalid">Required</div>
    </div>
</form>

см. stackblitz

...