如何在 Angular 6 中构建具有多个组件的表单?
How to build form with multiple components in Angular 6?
我正在尝试构建跨多个组件的 Reactive-Form,类似这样
<form [formGroup]="myForm" (ngSubmit)="onSubmitted()">
<app-names></app-names>
<app-address></app-address>
<app-phones></app-phones>
<button type="submit">Submit</button>
</form>
当我尝试提交时,我得到的是空对象。
进行以下更改
1.Use 只有一个 FormGroup
而不是为每个组件创建新的 FormGroup
。
2.You @Input
FormGroup
但是你没有作为输入传递。
3.Remove FormBuilder
来自子组件。
app.component.html
<form [formGroup]="myForm" (ngSubmit)="onSubmitted()">
<app-names [myForm]="myForm"></app-names>
<app-address [myForm]="myForm"></app-address>
<app-phones [myForm]="myForm"></app-phones>
<button type="submit">Submit</button>
</form>
address.component.ts
import { Component, OnInit, Input} from '@angular/core';
import { FormControl, FormGroup,FormBuilder } from '@angular/forms';
@Component({
selector: 'app-address',
templateUrl: './address.component.html',
styleUrls: ['./address.component.css']
})
export class AddressComponent implements OnInit {
@Input() myForm: FormGroup;
constructor(
private formBuilder: FormBuilder
) { }
ngOnInit() {
this.myForm.addControl("homeAddress" , new FormControl());
this.myForm.addControl("officeAddress" , new FormControl());
}
}
对其他组件进行类似的更改。
还有另一种不使用@Input 的方法
import { Component, OnInit } from '@angular/core';
import {
FormControl,
ControlContainer,
FormGroupDirective
} from '@angular/forms';
@Component({
selector: 'app-address',
templateUrl: './address.component.html',
styleUrls: ['./address.component.css'],
viewProviders: [
{
provide: ControlContainer,
useExisting: FormGroupDirective
}
]
})
export class AddressComponent implements OnInit {
constructor(private parent: FormGroupDirective) {}
ngOnInit() {
const myForm = this.parent.form;
myForm.addControl("homeAddress", new FormControl());
myForm.addControl("officeAddress", new FormControl());
}
}
我正在尝试构建跨多个组件的 Reactive-Form,类似这样
<form [formGroup]="myForm" (ngSubmit)="onSubmitted()">
<app-names></app-names>
<app-address></app-address>
<app-phones></app-phones>
<button type="submit">Submit</button>
</form>
当我尝试提交时,我得到的是空对象。
进行以下更改
1.Use 只有一个 FormGroup
而不是为每个组件创建新的 FormGroup
。
2.You @Input
FormGroup
但是你没有作为输入传递。
3.Remove FormBuilder
来自子组件。
app.component.html
<form [formGroup]="myForm" (ngSubmit)="onSubmitted()">
<app-names [myForm]="myForm"></app-names>
<app-address [myForm]="myForm"></app-address>
<app-phones [myForm]="myForm"></app-phones>
<button type="submit">Submit</button>
</form>
address.component.ts
import { Component, OnInit, Input} from '@angular/core';
import { FormControl, FormGroup,FormBuilder } from '@angular/forms';
@Component({
selector: 'app-address',
templateUrl: './address.component.html',
styleUrls: ['./address.component.css']
})
export class AddressComponent implements OnInit {
@Input() myForm: FormGroup;
constructor(
private formBuilder: FormBuilder
) { }
ngOnInit() {
this.myForm.addControl("homeAddress" , new FormControl());
this.myForm.addControl("officeAddress" , new FormControl());
}
}
对其他组件进行类似的更改。
还有另一种不使用@Input 的方法
import { Component, OnInit } from '@angular/core';
import {
FormControl,
ControlContainer,
FormGroupDirective
} from '@angular/forms';
@Component({
selector: 'app-address',
templateUrl: './address.component.html',
styleUrls: ['./address.component.css'],
viewProviders: [
{
provide: ControlContainer,
useExisting: FormGroupDirective
}
]
})
export class AddressComponent implements OnInit {
constructor(private parent: FormGroupDirective) {}
ngOnInit() {
const myForm = this.parent.form;
myForm.addControl("homeAddress", new FormControl());
myForm.addControl("officeAddress", new FormControl());
}
}