Почему FormArrayName всегда неопределен в моем html, даже при использовании оператора безопасной навигации? - PullRequest
Новая
       25

Почему FormArrayName всегда неопределен в моем html, даже при использовании оператора безопасной навигации?

0 голосов
/ 19 февраля 2020

Я следую примеру материала angular на https://angular.io/api/forms/FormArrayName

Я записываю в консоль логическую группу packageForm после того, как она инициализирована в ngOnInit () и переводы FormArray там. Но в html я получаю неопределенную ошибку. Я также попытался поместить оператор безопасной навигации в formArray, который избавляет от ошибки, но ничего не отображается.

Вот мой код в component.ts: 

ngOnInit() {
    this.packageModel = this.activatedRoute.snapshot.data['package'];
    if (this.packageModel) {
      this.editting = true;
    } else {
      this.packageModel = new PackageModel(null, true, 1, 0, 0, []);
    }
    this._setupForm();
  }

  ngAfterViewInit() {
    console.log(this.packageForm)
  }

  private _setupForm() {
    this.packageForm = this.formBuilder.group({
      isActive: [this.packageModel.isActive, [Validators.required]],
      quantity: [this.packageModel.quantity, [Validators.required]],
      minPrice: [this.packageModel.minPrice, [Validators.required]],
      maxPrice: [this.packageModel.maxPrice, [Validators.required]],
      translations: this.formBuilder.array([
          this._createTranslationFormGroup(0),
          this._createTranslationFormGroup(1)
      ])
    });

    console.log(this.packageForm)

    this.packageForm.get('isActive').valueChanges.subscribe(value => {
      this.packageModel.isActive = value;
    });
  }

  private _createTranslationFormGroup(index: number) {
    return this.formBuilder.group({
      name: [this.packageModel.translations[index].name, [Validators.required]],
      description: [this.packageModel.translations[index].description, [Validators.required]]
    });
  }

HTML код: 

<div *ngIf="packageForm" class="package-form" [formGroup]="packageForm">
    <div formArrayName="translations">
        <div class="row" *ngFor="let translation of translations.controls; index as i" [formGroupName]="i">
            <div class="col-6">
                <mat-form-field>
                    <input type="text" matInput [formControlName]="name" />
                </mat-form-field>
            </div>
        </div>
    </div>
</div>

Я получаю следующую ошибку: ОШИБКА TypeError: Невозможно прочитать свойство 'controls' неопределенного

enter image description here

Заранее спасибо, что нашли время помочь мне!

1 Ответ

0 голосов
/ 19 февраля 2020

должно быть *ngFor="let translation of packageForm.get('translations').controls. обычно для получения ярлыка к компоненту 

get translations() {
 return this.packageForm.get('translations') as FormArray
}
^^ with this your template referencing will work fine.

также <input formControlName="name"> <обычно используется метод получения сома - здесь фигурные скобки не нужны </p>

...