Angular 5 строит массив форм из результата JSON

Question

У меня возникла следующая проблема с массивами Angular, мне было интересно, может ли кто-нибудь помочь мне, так как я совсем новичок в Angular?

Извинения Я не могу предоставить планкер из-за сложности проекта(много зависимостей и сложный код), но я сделаю все возможное, чтобы предоставить как можно больше подробностей!

У меня есть JSON-ответ от вызова службы, который содержит группу полей (называемых «myFields»)) например:

0:
name: "field1"
1:
name: "field2"

Я получаю этот ответ от вызова API, и мне нужно создать форму, используя поля из ответа.В настоящее время я перебираю этот ответ и пытаюсь создать массив форм следующим образом:

constructor(private formBuilder: FormBuilder){

    this.myFormGroup = this.formBuilder.group({
        aliases: this.formBuilder.array([
        ])
    });

}

get aliases() {
    return this.myFormGroup.get('aliases') as FormArray;
}

getServiceFields(){

    *call to get fields and store in "myFields"*
    for (let item of myFields) {
        this.aliases.push(this.createGroup(item));
    }
}

createGroup(item): FormGroup {
    return this.formBuilder.group({
        name: new FormControl(item.name)
    });
}

И, на мой взгляд, у меня есть:

<div [formGroup]="myFormGroup" class="example-form">
    <div formArrayName="aliases" >
    <div *ngFor="let field of myFormGroup.controls.aliases.controls; 
    let i=index">

        <mat-form-field>
            <input matInput placeholder="{{field.value.name}}"
            formControlName="{{field.value.name"}}>
        </mat-form-field>

Проблема, с которой я сталкиваюсь, заключается в том, что ничегопоказывает на странице, и это ошибка, которую я вижу в окне консоли:

Ошибка: не удается найти элемент управления с путем: 'aliases -> name'

Я будутакже приложите скриншот, показывающий структуру моей FormGroup в окне консоли:

Структура FormGroup

Надеюсь, этого достаточно, если требуются дополнительные сведения, я могу предоставить их,У кого-нибудь есть идея, где я иду не так?Спасибо!

Редактировать: я не могу жестко закодировать formControlName (например, formControlName = "name"), поскольку я перебираю список элементов управления в "aliases", поэтому я пытаюсь использовать {{field.value.name}}

Answer 1

  <div *ngFor="let field of myFormGroup.controls.aliases.controls; 
    let i=index">
<div [formGroup]="field">
        <mat-form-field>
            <input matInput placeholder="{{field.value.name}}"
            formControlName="name">
        </mat-form-field>
        </div>

замените вышеуказанный код в вашем html.

Проблема в том, что вы не связываете formgroup перед formcontrolname.formcontrolname должно работать в форме группы.

Пожалуйста, дайте мне знать, если у вас есть какие-либо вопросы.