web-dev-qa-db-ja.com

Angular親コンポーネントのネスト形式で子コンポーネントフォームを使用する

ChildComponentフォームを親コンポーネントフォームに配置する最善の方法は何ですか？ 2019年に最新のAngular 8を使用しています。研究後の以下の方法は完全には機能しません。

親コンポーネント：

_ ngOnInit() {
    this.parentForm = this.fb.group({
       childForm1: etc
    })
_

子コンポーネント：

_this.ChildForm = this.formBuilder.group({
  'streetNumber': [null, [Validators.required, Validators.maxLength(32)]],
  'streetType': [null, [Validators.maxLength(8)]],
  'city': [null, [Validators.maxLength(32)]],
  'state': [null, [Validators.maxLength(16)]],
  'postalCode': [null, [Validators.maxLength(16)]],
}, { validator: atLeastOneLocationRequired })
_

}

方法1：

このメソッド、 https://itnext.io/partial-Reactive-Form-with-angular-components-443ca06d8419 子フォームが無効であっても、厳密なテスト状態が有効です。これは発生しません。

_ngOnInit() {
  this.parent = this.fb.group({
    fullName: null
  })
_

}

_formInitialized(name: string, form: FormGroup) {
  this.checkoutForm.setControl(name, form);
}
_

方法2 :

方法2はViewChildを利用しており、これは聴覚的な練習です。 https://davembush.github.io/attaching-an-angular-child-component-s-form-to-a-parent/

_@ViewChild(ChildComponent) childComponent: ChildComponent;

And now in ngAfterViewInit() we can add the child’s FormGroup as an additional “control” and set the parent FormGroup to the parent control’s FormGroup.

ngAfterViewInit() {
  this.form.addControl('childForm', this.childComponent.form);
  this.childComponent.form.setParent(this.form);
}
_

それで、Angular 8で最高のAngularの公式慣行は何ですか？

angulartypescriptangular-reactive-formsangular8
4
user12425844

私はあなたの問題に従って小さなシナリオを作成しました。

parentComponent：

HTML：

<form [formGroup]="form">
  <app-child [form]="form"></app-child>
  <pre>{{form.value | json}}</pre>
</form>
 _

NS：

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  form: FormGroup;
  constructor (private fb: FormBuilder) {}

   ngOnInit() {
    this.form = this.fb.group({
      childForm1: '',
      streetNumber: [null, [Validators.required, Validators.maxLength(32)]],
      streetType: [null, [Validators.maxLength(8)]],
      city: [null, [Validators.maxLength(32)]],
      state: [null, [Validators.maxLength(16)]],
      postalCode: [null, [Validators.maxLength(16)]],
    })
  }
}
 _

チャイルドコンポーネント：

HTML：

<div [formGroup]="form">
  <input formControlName="streetNumber"><br>
  <input formControlName="streetType"><br>
  <input formControlName="city"><br>
  <input formControlName="state"><br>
  <input formControlName="postalCode">
</div>
 _

NS：

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

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
   @Input() form: FormGroup;
  constructor() { }

  ngOnInit() {
  }

}
 _

ワーキングリンク： https://stackblitz.com/edit/angular-gjrphg

複数の子のためのリンクを更新しました: https：//stackblitz.com/edit/angular-svnqfh?file = src/app/app.component.html

1
Abhishek