父组件嵌套形式中的Angular Use子组件形式 [英] Angular Use Child Component Form in Parent Component Nested Form

问题描述

将ChildComponent表单放置到Parent Component表单中的最佳方法是什么?我们正在使用2019年最新的Angular8.经过研究，下面的以下方法无法完全发挥作用.

Whats the best way to place a ChildComponent form into a Parent Component Form? We are using the latest Angular 8 in 2019. The following methods below after research do not work fully.

父组件:

 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-带有角组件的反应形式443ca06d8419 经过严格的测试后，即使子窗体无效，ParentForm也有效.这不应该发生.

This method, https://itnext.io/partial-reactive-form-with-angular-components-443ca06d8419 after rigorous testing states ParentForm is Valid, even if the Child Form is invalid. This should not occur.

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/将一个角度儿童组件的形式附加到父母/

Method 2 utilizes ViewChild, which are hearing is bad practice. 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官方实践是什么?

So what is best Angular official practice in Angular 8?

推荐答案

我已经根据您的问题创建了小型方案.

I've create small scenario according to your problem.

parentComponent:

parentComponent:

HTML:

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

TS:

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)]],
    })
  }
}

childComponent:

childComponent:

HTML:

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

TS:

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

Updated link for multiple child: https://stackblitz.com/edit/angular-svnqfh?file=src/app/app.component.html

这篇关于父组件嵌套形式中的Angular Use子组件形式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！