我想创建一个自定义表单控件来处理自身的任何错误。这意味着显示此组件内部的错误。我创建了一个实现的组件ControlValueAccessor。我可以从这样的形式读取错误：form.controls.myfieldname.errors.aErrorName因此，我将其传递form.controls.myfieldname给constom控件。
有没有更好的方法来为自定义表单控件创建字段验证？
我的自定义控件：
@Component({
selector: 'input-text2',
templateUrl: './input-text2.component.html',
styleUrls: ['/input-base2.scss', './input-text2.component.scss'],
providers: [
{ provide: NG_VALUE_ACCESSOR, multi: true, useExisting: InputText2Component }
]
})
export class InputText2Component implements ControlValueAccessor {
// The control field: form.controls.fieldname
@Input() field;
@Input() label: string;
@Input() errorMessage: string;
value: string;
valueChange: (value: any) => void;
_onTouched: (value: any) => void;
writeValue(value: any): void {
this.value = value;
this.createClasses(this.size);
}
registerOnChange(fn: (value: any) => void): void {
this.valueChange = fn;
}
registerOnTouched(fn: (value: any) => void): void {
this._onTouched = fn;
}
}
布局：
<div *ngIf="field?.errors && field?.touched">
invalid
</div>
形式：
<form novalidate #form="ngForm">
<input-text2 [field]="form.controls.fieldname" name="fieldname" errorMessage="My error message" label="My label" [(ngModel)]="model"
custom-validator>
</input-text2>
</form>
所以我找到了答案
我将此添加到我的控件中：
private ngControl: NgControl;
constructor(private injector: Injector) {
}
ngOnInit(): void {
this.ngControl = this.injector.get(NgControl);
}
ngControl现在与我的field财产基本相同。接下来，我可以将其field完全删除并替换为ngControl。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句