Я не могу получить значения из FormArray в Angular6 - PullRequest
0 голосов
/ 29 августа 2018

Я не могу получить данные массива формы. Здесь я использую два поля в одной группе форм и один массив форм. Теперь я хочу получить все данные из группы форм и массива форм. Предложить решение, чтобы избавиться от этой ошибки

Вот мой .ts код

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators, FormArray } from 
'@angular/forms';
@Component({
  selector: 'app-basic-forms',
  templateUrl: './basic-forms.component.html',
  styleUrls: ['./basic-forms.component.css']
})
export class BasicFormsComponent implements OnInit {
  registerForm: FormGroup;
  constructor(private formBuilder: FormBuilder) { }
  ngOnInit() {
    this.registerForm = this.formBuilder.group({
      firstName: ['', Validators.required],
      lastName: ['', Validators.required],
      aliases: this.formBuilder.array([])
    });
  }
  get aliases() {
    return this.registerForm.get('aliases') as FormArray;
  }
  addAlias() {
    this.aliases.push(this.formBuilder.group({
      Name: [''],
      Age: ['']
    }));
  }
  onSubmit() {
    alert(Success!!\n\n ${JSON.stringify(this.registerForm.value)});
  }
}

HTML-код:

<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
  <div class="form-row">
     <div class="col">
        <label>First Name</label>
        <input type="text" class="form-control" placeholder="First name" formControlName="firstName" />
     </div>
     <div class="col">
       <label>Last Name</label>
       <input type="text" class="form-control" placeholder="Last name" formControlName="lastName" />
     </div>
  </div>
  <br>
  <div class="form-row">
        <div formArrayName="aliases">
          <button class="btn btn-info btn-sm" (click)="addAlias()">Add</button>
          <div *ngFor="let address of registerForm.controls.aliases.controls; let i=index">
            <div formGroupName="i">
                Name : <input type="text" class="form-control" formControlName = "Name" />
                Age : <input type="text" class="form-control" formControlName = "Age" />
            </div>
          </div>
        </div>
      </div>
      <br>
      <button type="submit" class="btn btn-primary">Submit</button>
</form>

выход

1 Ответ

0 голосов
/ 29 августа 2018

Просто измените formGroupName="i" на [formGroupName]="i"

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...