Блог

Я не могу получить значения полей FormArray при отправке формы. Я получаю пустые значения в полях массива форм.

Всякий раз, когда я нажимаю на кнопку addHobbies, я получаю сообщение об ошибке: Не удается найти элемент управления с именем «0»

signupForm.component.html

 <div class="container">
    <form [formGroup]="signupForm" (ngSubmit)="onSubmit()">
        <div class="row mb-3">
            <div class="form-group col-6">
            <label>Email</label>
            <input type="email" formControlName="email" class="form-control">
            <span class="help-block">Email Required</span>
            </div>
        </div>
        <div FormArrayName="hobbies">
            <div class="row mb-3">
                <div class="form-group col">
                <button type="button" class="btn btn-primary" (click)="addHobbies()">Add Hobbies</button>
                </div>
            </div>
            <div class="row mb-3">
                <div class="form-group col" *ngFor="let hobby of hobbyControls.controls; let i=index">
                {{i}}
                <input type="text" class="form-control" [formControlName]="i">
                </div>
            </div>
        </div>
        <div class="mb-5">
        <button type="submit" class="btn btn-primary">Submit</button>
        <button type="reset" class="btn btn-danger">Reset</button>
        </div>
    </form>
</div>
 

форма регистрации.компонент.ts

 export class ReactiveformsComponent implements OnInit {
    
  signupForm : FormGroup;
 
  constructor(private fb: FormBuilder) { }

  
     ngOnInit(): void {

        this.signupForm = this.fb.group({
            'email': [''],
            'hobbies': this.fb.array([])
        })

    }
    addHobbies(){
        //const hobbyControl = this FormControl('');
        (<FormArray>this.signupForm.get('hobbies')).push(this.fb.control(''));
    }
    get hobbyControls(){
        return this.signupForm.get('hobbies') as FormArray;
    }

    onSubmit(){
        console.log(this.signupForm.value);
    }
 

выход

{«электронная почта»:»john@gmail.com»,»хобби»:[«»,»»]}

Попробуйте вот так, вместо того, чтобы я использовал хобби здесь

 <div class="row mb-3">
                <div class="form-group col" *ngFor="let hobby of hobbyControls.controls; let i=index">
                {{i}}
                <input type="text" class="form-control" [formControlName]="hobby">
                </div>
            </div>
 

Существует ошибка опечатки для FormArrayName .

 <div FormArrayName="hobbies">
  ...
</div>
 

Решение

Измените его на formArrayName так, чтобы директива работала.

 <div formArrayName="hobbies">
  ...
</div>
 

Образец решения на СтекбЛитце

Рекомендации

Массив Угловой Формы