我需要编写一个可以在表单中使用的组件。我想将其发布为ng-invalid。
那是我的表单模板/视图：
<form #myForm="ngForm">
<domain-base-value [(ngModel)]="value.value" name="bla" #bla="ngModel">
</domain-base-value>
<div [hidden]="myForm.valid || myForm.pristine">
Form is not valid
</div>
</form>
那是域基值组件视图： <input [(ngModel)]="value" required /> 如果我运行它，则输入将变为ng-invalid，但不是域基值和表单。我可以将其required移至表单，但是我希望子组件在有效时和无效时都具有逻辑。有什么建议么？
您需要通过实现自定义值访问器来使其子组件ngModel兼容。这样，您将可以使用ngModel和指令，例如ngFormControl应用验证器。
这是一个示例：
const MY_VALUE_ACCESSOR = new Provider(
NG_VALUE_ACCESSOR, {useExisting: forwardRef(() => MyInputComponent), multi: true});
@Component({
(...)
providers: [ MY_VALUE_ACCESSOR ]
})
export class MyInputComponent extends DefaultValueAccessor {
onChange = (_) => {};
onTouched = () => {};
writeValue(value:any):void {
if (value!=null) {
super.writeValue(value.toString());
}
}
// call when your internal input is updated
doOnChange(val) {
this.onChange(val);
}
}
有关更多详细信息，请参见本文（“与NgModel兼容的组件”一节）：
另请参阅以下问题：
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句