在提交时验证子组件
我一直在网上搜索，却找不到任何答案。
我用的是角10和反应形式。
以下是我的问题:单击submit按钮会在按钮级别触发窗体上的有效性，而不是在子组件级别触发有效性。
如果您在本例中按下"save“，您将只看到第一个输入触发验证并变为红色，而另一个则需要手动单击。我有一个带有两个控件的formGroup，一个是FormControl，另一个是FormArray。我将主formGroup传递给子组件，并将1 formGroup推到formArray中，这个formGroup有一个formControl。基本上，我在叶子上有两个FormControl。如果说不通的话请告诉我。
因此，我希望检查所有元素的有效性，不管它是否在子组件中。
回答 3
Stack Overflow用户
发布于 2021-01-24 13:36:38
您可以像这样在ControlContainer中使用viewProviders：
control-container.ts
import { Provider, SkipSelf } from '@angular/core';
import { ControlContainer } from '@angular/forms';
export function controlProviderFactory(container: ControlContainer) {
return container;
}
export const CONTROL_CONTAINER: Provider = {
provide: ControlContainer,
useFactory: controlProviderFactory,
deps: [[new SkipSelf(), ControlContainer]],
};child.component.ts
import { Component, OnInit, Input } from "@angular/core";
import { FormArray, FormControl, FormGroup, Validators } from "@angular/forms";
import { CONTROL_CONTAINER } from "../control-container";
@Component({
selector: "app-child",
templateUrl: "./child.component.html",
styleUrls: ["./child.component.css"],
viewProviders: [CONTROL_CONTAINER]
})
export class ChildComponent implements OnInit {
@Input() public form: FormGroup;
constructor() {}
ngOnInit() {}
}child.component.html
<ng-container formArrayName="subForm">
<mat-input-container [formGroupName]="0">
<mat-form-field>
<input matInput formControlName="subControl">
</mat-form-field>
</mat-input-container>
</ng-container>并在AppComponent的构造函数中初始化
constructor (private formBuilder: FormBuilder) {
this.fg = this.formBuilder.group({
name: [null, Validators.required],
subForm: this.formBuilder.array([])
});
const control = <FormArray>this.fg.controls['subForm'];
control.push(this.formBuilder.group({
subControl: ['', Validators.required]
}));
}有一个错误“mat错误不显示在提交时，字段被添加到一个FormArray”。这是在GitHub 这里上描述的。
基于代码的工作示例您可以找到这里。
Stack Overflow用户
发布于 2021-01-24 13:28:38
Angular没有自动验证所有窗体控件和子窗体控件的机制，该任务留给开发人员：
save() {
this.validateAllFormFields(this.fg);
}
ngOnInit() {
this.fg = new FormGroup({
name: new FormControl(
{ value: "", disabled: false },
Validators.required
),
sub: new FormArray([])
});
}
validateAllFormFields(formGroup: FormGroup | FormArray) {
Object.keys(formGroup.controls).forEach(field => {
const control = formGroup.get(field);
if (control instanceof FormControl) {
control.markAsTouched({ onlySelf: true });
} else if (control instanceof FormGroup || control instanceof FormArray) {
this.validateAllFormFields(control);
}
});
}Stack Overflow用户
发布于 2021-01-24 11:55:02
对于sue案例，假设您有带有子部件的仪表板场景。
以下是来自penley chan的示例借来
@Directive({
selector: '[provide-parent-form]',
providers: [
{
provide: ControlContainer,
useFactory: function (form: NgForm) {
return form;
},
deps: [NgForm]
}
]
})
export class ProvideParentForm {}用法:在您的组件中，在根元素中添加(ngModel)指令。示例：
<div provide-parent-form>
<input name="myInput" [(ngModel)]="myInput">
</div>现在，如果在控制台中输出窗体对象或其他任何内容，则可以在窗体对象的controls属性下看到组件的控件。
https://stackoverflow.com/questions/65874702
复制
腾讯云开发者
