☰

タイプ 'AbstractControl' には、タイプ 'FormGroup' の以下のプロパティがありません: controls、registerControl、addControl、removeControl、その他 3 つ 質問する

tag-icon • tag-icon typescript angular8 angular-reactive-forms
タイプ 'AbstractControl' には、タイプ 'FormGroup' の以下のプロパティがありません: controls、registerControl、addControl、removeControl、その他 3 つ 質問する

最近、ng 7.2.15 と typescript 3.2.4 から angular v8.2.14 と typescript v3.5.3 にアップグレードしました。親コンポーネントから子コンポーネントにフォーム グループを渡すことができなくなりました。

以下は私の子コンポーネントです: child component.ts

@Component({selector:'edit-overview'})
export class ChildComponent implements OnInit {  
   public OverviewFormGroup : FormGroup
   constructor(private controlContainer: ControlContainer) {
   }

  ngOnInit() {
  this.OverviewFormGroup = <FormGroup>this.controlContainer.control;
  }
}

子コンポーネント.html

<div [formGroup] ='OverviewFormGroup'>
</div>

そして私の親コンポーネント

親.コンポーネント.html

<div [formGroup]="Form1">
  <edit-overview [formGroup]="Form1.controls.OverviewFormGroup">
  </edit-overview>
</div>

親.コンポーネント.ts

export class ParentComponent {
  constructor(private readonly fb: FormBuilder) {
    this.Form1 = this.fb.group({
    name: new FormControl('', [Validators.required]),
    OverviewFormGroup: new FormGroup({
            description: new FormControl('', [Validators.nullValidator])
          })
    })
  }
}

次のエラーがスローされます: タイプ 'AbstractControl' には、タイプ 'FormGroup' の次のプロパティがありません: controls、registerControl、addControl、removeControl、および親テンプレート行の 3 つ以上。

以前は、フォーム グループを親から子に渡すことは問題ではなくなりました。ここで何か見落としているのでしょうか? フォーム グループ宣言でコントロールに値を既に指定しています。

ベストアンサー1

いい質問ですね。これはわかりにくいエラーです。このエラーは型安全機能から発生します。Angularはアクセス方法からフォームグループであるかどうかを知ることができないため（ であることしか知りませんAbstractFormControl）、それを伝えます！

オプション1:as型を明示的にするために使用する

たとえば、次のような場合です。

  mainForm: FormGroup = this.formBuilder.group({
    name: ['Max'],
    address: this.formBuilder.group({
      street: ['PayneStreet'],
      zip: [50000]
    })
  });

実際にフォーム コントロールにアクセスしていることを Angular に知らせるには、次のことを伝える必要があります。

  get addressForm() {
    return this.mainForm.get('address') as FormGroup;
  }

重要なのはas FormGroup. このように、Angular はそれがFormGroup単なる抽象的なフォーム コントロールではなく、実際には であることを認識します。次に、HTML でそれを使用できます。

<app-address-form [addressForm]="addressForm"></app-address-form>

StackBlitz はここから見つかります:https://stackblitz.com/edit/angular-nested-forms-input

オプション2（推奨）: ネストされたグループを個別に定義する

実際には、2 番目のフォームを個別に構築し、それをメイン フォームにアタッチする方が簡単で型安全です。

  addressForm = this.formBuilder.group({
    street: ["PayneStreet"],
    zip: [50000]
  });

  mainForm: FormGroup = this.formBuilder.group({
    name: ["Max"],
    address: this.addressForm
  });

そしてHTMLでは（上記と同じ）

  <app-address-form [addressForm]="addressForm"></app-address-form>

このように、Angularは既にaddressForm型が型であることを知っておりFormGroup、型だけではないことを知っていますAbstractFormControl

スタックブリッツ:https://stackblitz.com/edit/angular-nested-forms-input-2

おすすめ記事