web-dev-qa-db-ja.com

文字列にプロパティ 'validator'を作成できません

Angular 5ネストされたリアクティブフォームを作成しようとしています。

最初はフラットなフォームを作成しましたが、これは期待どおりに機能しましたが、フォームの一部を抽出して子コンポーネントとして配置するとすぐにエラーが発生します

エラーTypeError：文字列「addressFormGroup」にプロパティ「validator」を作成できません

別のエラーを入力し始めると、コンソールに表示されます

エラーTypeError：this.form.getは関数ではありません

私は何を間違えていますか？私はこれを試して解決するためにいくつかのスレッドとチュートリアルを読みましたが、明らかな何かを見逃していると思います。

import { Component, OnInit } from '@angular/core'
import { FormControl, FormGroup, FormBuilder, Validators } from '@angular/forms';
import { Address } from '../Property';

@Component({
moduleId: module.id,
selector: 'app-property-form',
templateUrl: './property-form.component.html',
styleUrls: ['./property-form.component.css']
})
export class PropertyFormComponent implements OnInit {

propertyForm: FormGroup;

constructor(private _formBuilder: FormBuilder) {}

ngOnInit() {
    this.createForm();
}

createForm() {
    this.propertyForm = this._formBuilder.group({
        saleOrLet: ['Sales', Validators.required],
        addressFormGroup: this.initAddress()
    })
}

initAddress() {
    return this._formBuilder.group({
        houseNameNumber: '',
        address2: '',
        postCode1: '',
        postCode2: ''
    })
}
}

作業形態

<form [formGroup]="propertyForm" novalidate>
<fieldset>
<legend>Address</legend>
<div formGroupName="addressFormGroup">
  <div class="form-group">
    <label>
      House Name Or Number:
      <input placeholder="15 Nursery ave" formControlName="houseNameNumber">
    </label>
  </div>
  ...other inputs follow the same pattern...
</div>
</fieldset>
</form>

壊れたフォーム（親子形式に分割する場合）

親

<form [formGroup]="propertyForm" novalidate>
  <fieldset>
    <legend>Address 2</legend>
    <app-property-form-address group="addressFormGroup"></app-property-form-address>
  </fieldset>
</form>

子

<div [formGroup]="group">
 <div class="form-group">
    <label>
      House Name Or Number:
      <input placeholder="15 Nursery ave" formControlName="houseNameNumber">
    </label>
  </div>
  ...other inputs follow the same pattern...
</div>

子コンポーネント

import { Component, Input } from '@angular/core';
import { FormGroup } from '@angular/forms';

@Component({
   selector: 'app-property-form-address',
   templateUrl: './property-form-address.component.html',
})
export class PropertyFormAddressComponent {
    @Input() group: FormGroup;
}
angularangular5angular-forms
5
tony09uk

FormGroupへの参照ではなく文字列としてフォームグループ名を渡し、FormGroup（group="addressFormGroup"）。 group="addressFormGroup"はformGroupオブジェクトを渡さず、addressFormGroupの値を持つ文字列を渡します。

11
Nikola Jankovic

同じ問題があり、formオブジェクト/変数をformGroup="form"として渡していましたが、正しい方法は[]をformGroupとして[formGroup]="form"として設定することです。

以下の例を参照してください。

<form [formGroup]="form">
    // form-controls
</form>
4
WasiF