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模板驱动表单：如何为自定义表单控件创建字段验证？

1 个答案: