Angular2 模板驱动的表单：如何为自定义表单控件创建字段验证？

Question

我想创建一个自定义表单控件来自行处理任何错误。这意味着显示该组件内部的错误。我创建了一个实现 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>

Answer 1

所以我找到了答案

我将此添加到我的控件中：

private ngControl: NgControl;

constructor(private injector: Injector) {

}

ngOnInit(): void {
    this.ngControl = this.injector.get(NgControl);
}

ngControl现在和我的field属性基本一样了。接下来我可以完全删除 field 并替换为 ngControl.

Angular2 模板驱动的表单：如何为自定义表单控件创建字段验证？

Angular2 template driven forms: how to create field validation for a custom form control?

angular2-forms

angular