Не удается найти элемент управления с путем: 'alternateAddress -> [объект Object]' - PullRequest
Новая
       10

Не удается найти элемент управления с путем: 'alternateAddress -> [объект Object]'

0 голосов
/ 31 мая 2019

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

Я ссылался на угловой документ при добавлении динамических элементов управления с массивом форм. https://angular.io/guide/reactive-forms#dynamic-controls-using-form-arrays а также аналогичная проблема при переполнении стека: Angular: не удается найти элемент управления с путем: 'variable-> 0 -> id'

класс компонентов: 

get alternateAddress() {
    return this.signupForm.get('alternateAddress') as FormArray;
  }
 buildAddress() {
    return this.fb.group({
      city: [''],
      street: ['']
    });
  }
  addAlternateAddress() {
    this.alternateAddress.push( this.buildAddress());
  }
  ngOnInit() {
    this.signupForm = this.fb.group({
      name: ['', [Validators.required]],
      password: ['', [Validators.required]],
      confirmPassword: ['', [Validators.required]],
      email: ['', [Validators.email]],
      subscribe: [''],
      phone: ['', [Validators.required, Validators.pattern]],
      topic: ['', [Validators.required]],
      address: this.fb.group({
        city: [''],
        street: ['']
      }),
      alternateAddress: this.fb.array([ ])
    }, {validator: PasswordMatchValidator});

Шаблон компонента 

 <button type="button" class="btn btn-sm btn-warning" (click)="addAlternateAddress()">Add alternate address</button>
    <div *ngIf="alternateAddress.length > 0">
      <div class="form-group" formArrayName="alternateAddress" *ngFor="let addr of alternateAddress.controls; let i=index">
        <div [formGroupName]="alternateAddress.controls[i]">
          <div class="form-group">
            <label for="city">City</label>
            <input type="text" class="form-control" name="city" [formControlName]="city">
          </div>
          <div class="form-group">
            <label for="name">Street</label>
            <input type="text" class="form-control" name="street" [formControlName]="street">
          </div>
        </div>
      </div>
    </div>

Я не совсем уверен, как обеспечить путь к группе форм и ссылаться на ее отдельные элементы управления, поскольку в документации демонстрируется только часть элементов управления.

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

1 Ответ

0 голосов
/ 01 июня 2019

Спасибо developer033 за комментарий.Это действительно помогло мне отладить код. 

    <div class="form-group" formArrayName="alternateAddress" *ngFor="let addr of alternateAddress.controls; let i=index">
                <div [formGroupName]="i">
<div class="form-group">
                <label for="city">City</label>
                <input type="text" class="form-control" name="city" formControlName="city">
              </div>

Это решило проблему.Привязка индекса к [ formGroupName ] и использование formControlName без квадратных скобок.

...