如何在可重用的响应式表单中添加验证

Question

这是可重用的响应式表单。如何在app-child中添加required验证和streetformControlName的错误消息?

这是stackblitz

app.html

<form [formGroup]="myForm">
<label>Name: </label>
<input formControlName="name" />
<app-child [address]="myForm"></app-child>
</form>

app.ts

export class AppComponent {
myForm: FormGroup;
constructor(private fb: FormBuilder) {}
ngOnInit() {
this.myForm = this.fb.group({
name: [""],
street: [""],
zip: [""]
});
}
}

child.ts

@Component({
selector: "app-child",
template: `
<div [formGroup]="address">
<label>Street: </label>
<input formControlName="street" /><br />
<label>Zip: </label>
<input formControlName="zip" />
</div>
`
})
export class HelloComponent {
@Input() address: FormGroup;
}

Answer 1

我编辑了你的stackblitz来演示我的以下答案:

最好使用ControlValueAccessor来创建自定义表单控件。

检查示例从我的项目实现自定义表单控制与验证。

你将需要为验证和ControlValueAccessor添加提供者。

providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => SkillFormComponent),
multi: true,
},
{
provide: NG_VALIDATORS,
useExisting: forwardRef(() => SkillFormComponent),
multi: true,
},
],

基本上你的组件应该实现ControlValueAccessor。需要实现这些函数的地方:

writeValue
registerOnChange
registerOnTouched
setDisabledState

至于验证，你只需要实现一个函数:

validate

要获得更多信息，请查看web上的一些示例。这是一个很好的谈话。