Угловая реактивная форма с динамическими полями

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

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

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

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

Я добавляю динамические поля следующим образом:

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

Я перебираю эти поля:

<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>

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

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


javascript angular forms formarray formgroups
person jenesuispastom    schedule 27.01.2020    source источник
comment
Как [formControlName]="field.id_campo" динамичен?   -  person Nicholas K    schedule 27.01.2020
comment
что такое id_campo и где он установлен, пожалуйста, создайте stackblitz, чтобы помочь вам лучше   -  person Reza    schedule 27.01.2020
comment
Думайте, что formGroup — это только группа FormControls. Чтобы получить доступ к formControl группы formGroup, вы используете nameOfForm.get('nameOfField'), поэтому вы можете использовать otherDataForm.get(field.id_campo) для получения formControl, поэтому otherDataForm.get(field.id_campo).valid дает вам, если он действителен, otherDataForm.get(field.id_campo).errors дает вам ошибки... даже вы можете использовать в ваш вклад <input class="form-control" [formControl]="otherDataForm.get(field.id_campo)" type="number">   -  person Eliseo    schedule 27.01.2020
comment
@Eliseo Я пробовал это, но это не работает, похоже, что ngfor работает отдельно от формы.   -  person jenesuispastom    schedule 27.01.2020
comment
@NicholasK Ну, по крайней мере, это добавляет свойство field.id_campo в качестве имени для каждого поля.   -  person jenesuispastom    schedule 27.01.2020
comment
Значение формы, когда я ее отправляю, возвращает это, это то, что я ожидаю. значение: 1:14:29:asd 43:1636 57:asd 72:123 87:sad 102:asfa 116:asfa 154:   -  person jenesuispastom    schedule 27.01.2020
comment
у вас есть ошибка в вашей функции addField. Вы используете внутри id_campo, но не передаете его в качестве аргумента. Я оставил в ответе stackblitz с различными способами управления FormControl. совет: полезно добавить в .html для проверки некоторые, такие как {{form?.value|json}}, чтобы увидеть значение формы   -  person Eliseo    schedule 27.01.2020

Ответы (1)


arrow_upward
6
arrow_downward

ну, я чувствую себя более комфортно, используя непосредственно конструктор 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

person Eliseo    schedule 27.01.2020
comment
Большое спасибо, Элисео. Вы просветили меня с моей ошибкой во время получения ошибки из каждого поля. - person jenesuispastom; 28.01.2020