Angular 在父组件嵌套表单中使用子组件表单 [英] Angular Use Child Component Form in Parent Component Nested Form
问题描述
将子组件表单放入父组件表单的最佳方法是什么?我们使用的是 2019 年最新的 Angular 8.经过研究,以下方法不能完全奏效.
父组件:
ngOnInit() {this.parentForm = this.fb.group({childForm1:等})
子组件:
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)]],}, { 验证器:atLeastOneLocationRequired })
}
方法一:
这个方法,https://itnext.io/partial-reactive-form-with-angular-components-443ca06d8419经过严格的测试表明 ParentForm 有效,即使 Child Form 无效.这不应该发生.
ngOnInit() {this.parent = this.fb.group({全名:空})
}
formInitialized(name: string, form: FormGroup) {this.checkoutForm.setControl(name, form);}
方法二:
方法 2 使用 ViewChild,这是听力不好的做法.https://davembush.github.io/attaching-an-angular-child-component-s-form-to-a-parent/
@ViewChild(ChildComponent) childComponent: ChildComponent;现在在 ngAfterViewInit() 中,我们可以将孩子的 FormGroup 添加为附加的控件",并将父 FormGroup 设置为父控件的 FormGroup.ngAfterViewInit() {this.form.addControl('childForm', this.childComponent.form);this.childComponent.form.setParent(this.form);}
那么 Angular 8 中最好的 Angular 官方实践是什么?
我已经根据你的问题创建了小场景.
父组件:
HTML:
TS:
import { Component, OnInit } from '@angular/core';从@angular/forms"导入 { FormGroup, FormBuilder, Validators };@成分({选择器:'我的应用',templateUrl: './app.component.html',styleUrls: ['./app.component.css']})导出类 AppComponent 实现 OnInit {表格:表格组;构造函数(私有 fb:FormBuilder){}ngOnInit() {this.form = this.fb.group({childForm1: '',streetNumber: [null, [Validators.required, Validators.maxLength(32)]],streetType: [null, [Validators.maxLength(8)]],城市:[null,[Validators.maxLength(32)]],状态:[null,[Validators.maxLength(16)]],postalCode: [null, [Validators.maxLength(16)]],})}}
子组件:
HTML:
<input formControlName="streetNumber"><br><input formControlName="streetType"><br><input formControlName="city"><br><input formControlName="state"><br><input formControlName="postalCode">
TS:
import { Component, OnInit, Input } from '@angular/core';从@angular/forms"导入{FormGroup};@成分({选择器:'app-child',templateUrl: './child.component.html',styleUrls: ['./child.component.css']})导出类 ChildComponent 实现 OnInit {@Input() 表单:FormGroup;构造函数(){}ngOnInit() {}}
工作链接:https://stackblitz.com/edit/angular-gjrphg>
更新了多个孩子的链接:https://stackblitz.com/edit/angular-svnqfh?file=src/app/app.component.html
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.
Parent Component:
ngOnInit() {
this.parentForm = this.fb.group({
childForm1: etc
})
Child Component:
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 })
}
Method 1:
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);
}
Method 2:
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);
}
So what is best Angular official practice in Angular 8?
I've create small scenario according to your problem.
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:
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() {
}
}
Working link: https://stackblitz.com/edit/angular-gjrphg
Updated link for multiple child: https://stackblitz.com/edit/angular-svnqfh?file=src/app/app.component.html
这篇关于Angular 在父组件嵌套表单中使用子组件表单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!