假设我从angular2 app生成的html看起来像这样：
<app>
<form [formGroup]="myForm" (ngSubmit)="onSubmit(myForm.value)">
<panel-component>
<mid-component>
<inner-component-with-inputs>
<input/>
<inner-component-with-inputs>
<mid-component>
</panel-component>
<panel-component>
<mid-component>
<inner-component-with-inputs>
<input/>
<inner-component-with-inputs>
<mid-component>
</panel-component>
<!-- many many many fields -->
<button type="submit">Submit</button>
</form>
</app>
如何设置外部<form>以便我可以在提交时验证所有内部输入？我是否必须将myForm一直@Input()从panel-component传递到inner-component-with-inputs？或者还有其他方式吗？
在我的应用程序中，我有一个非常大的表单，有多个面板，子面板，标签，模态等。我需要能够在提交时一次验证所有内容。
互联网上的所有教程和资源仅涉及跨越一个组件/模板的表单。
答案 0 :(得分：12)
当涉及父/子关系时，您将在整个Angular源代码中看到的常见模式是父类型，将自身添加为自身的提供者。这样做是允许子组件注入父组件。由于hierarchical DI，只有一个父组件的实例 down 组件树。下面是一个可能是什么样子的例子
export abstract class FormControlContainer {
abstract addControl(name: string, control: FormControl): void;
abstract removeControl(name: string): void;
}
export const formGroupContainerProvider: any = {
provide: FormControlContainer,
useExisting: forwardRef(() => NestedFormComponentsComponent)
};
@Component({
selector: 'nested-form-components',
template: `
...
`,
directives: [REACTIVE_FORM_DIRECTIVES, ChildComponent],
providers: [formGroupContainerProvider]
})
export class ParentComponent implements FormControlContainer {
form: FormGroup = new FormGroup({});
addControl(name: string, control: FormControl) {
this.form.addControl(name, control);
}
removeControl(name: string) {
this.form.removeControl(name);
}
}
一些注意事项：
我们使用接口/抽象父级（FormControlContainer）有几个原因
ParentComponent与ChildComponent分开。孩子不需要了解具体的ParentComponent。所有它知道的是FormControlContainer和合同。ParentComponent上想要的方法。我们只宣传 ParentComponent为FormControlContainer，所以后者就是我们要注入的内容。
我们以formControlContainerProvider的形式创建提供商，然后将该提供商添加到ParentComponent。由于分层DI，现在所有孩子都可以访问父母。
如果您不熟悉forwardRef，this is a great article
现在在孩子（你）可以做到
@Component({
selector: 'child-component',
template: `
...
`,
directives: [REACTIVE_FORM_DIRECTIVES]
})
export class ChildComponent implements OnDestroy {
firstName: FormControl;
lastName: FormControl;
constructor(private _parent: FormControlContainer) {
this.firstName = new FormControl('', Validators.required);
this.lastName = new FormControl('', Validators.required);
this._parent.addControl('firstName', this.firstName);
this._parent.addControl('lastName', this.lastName);
}
ngOnDestroy() {
this._parent.removeControl('firstName');
this._parent.removeControl('lastName');
}
}
IMO，这是一个比传递FormGroup到@Input更好的设计。如前所述，这是Angular源代码中的常见设计，因此我认为可以肯定地说这是一种可接受的模式。
如果您想让子组件更具可重用性，可以创建构造函数参数@Optional()。
以下是我用来测试上述例子的完整资料来源
import {
Component, OnInit, ViewChildren, QueryList, OnDestroy, forwardRef, Injector
} from '@angular/core';
import {
FormControl,
FormGroup,
ControlContainer,
Validators,
FormGroupDirective,
REACTIVE_FORM_DIRECTIVES
} from '@angular/forms';
export abstract class FormControlContainer {
abstract addControl(name: string, control: FormControl): void;
abstract removeControl(name: string): void;
}
export const formGroupContainerProvider: any = {
provide: FormControlContainer,
useExisting: forwardRef(() => NestedFormComponentsComponent)
};
@Component({
selector: 'nested-form-components',
template: `
<form [formGroup]="form">
<child-component></child-component>
<div>
<button type="button" (click)="onSubmit()">Submit</button>
</div>
</form>
`,
directives: [REACTIVE_FORM_DIRECTIVES, forwardRef(() => ChildComponent)],
providers: [formGroupContainerProvider]
})
export class NestedFormComponentsComponent implements FormControlContainer {
form = new FormGroup({});
onSubmit(e) {
if (!this.form.valid) {
console.log('form is INVALID!')
if (this.form.hasError('required', ['firstName'])) {
console.log('First name is required.');
}
if (this.form.hasError('required', ['lastName'])) {
console.log('Last name is required.');
}
} else {
console.log('form is VALID!');
}
}
addControl(name: string, control: FormControl): void {
this.form.addControl(name, control);
}
removeControl(name: string): void {
this.form.removeControl(name);
}
}
@Component({
selector: 'child-component',
template: `
<div>
<label for="firstName">First name:</label>
<input id="firstName" [formControl]="firstName" type="text"/>
</div>
<div>
<label for="lastName">Last name:</label>
<input id="lastName" [formControl]="lastName" type="text"/>
</div>
`,
directives: [REACTIVE_FORM_DIRECTIVES]
})
export class ChildComponent implements OnDestroy {
firstName: FormControl;
lastName: FormControl;
constructor(private _parent: FormControlContainer) {
this.firstName = new FormControl('', Validators.required);
this.lastName = new FormControl('', Validators.required);
this._parent.addControl('firstName', this.firstName);
this._parent.addControl('lastName', this.lastName);
}
ngOnDestroy() {
this._parent.removeControl('firstName');
this._parent.removeControl('lastName');
}
}
答案 1 :(得分：0)
使用@Inputs可以更轻松地将formGroup和formControl传递给更低的组件。 Plunker： https://plnkr.co/edit/pd30ru?p=preview
在FormComponent（MgForms）[main]中我们这样做：
代码：
this.form = this.formBuilder.group(formFields);
：
<form [formGroup]="form" novalidate>
<div class="mg-form-element" *ngFor="let element of fields">
<div class="form-group">
<label class="center-block">{{element.description?.label?.text}}:
<div [ngSwitch]="element.type">
<!--textfield component-->
<div *ngSwitchCase="'textfield'"class="form-control">
<mg-textfield
[group]="form"
[control]="form.controls[element.fieldId]"
[element]="element">
</mg-textfield>
</div>
<!--numberfield component-->
<div *ngSwitchCase="'numberfield'"class="form-control">
<mg-numberfield
[group]="form"
[control]="form.controls[element.fieldId]"
[element]="element">
</mg-numberfield>
</div>
</div>
</label>
</div>
</div>
</form>
在FieldComponent（MgNumberfield）[内部]我们这样做：
代码：
@Input() group;
@Input() control;
@Input() element;
：
<div [formGroup]="group">
<input
type="text"
[placeholder]="element?.description?.placeholder?.text"
[value]="control?.value"
[formControl]="control">
</div>