如何在触摸后验证自定义角度表单控件？

我有一个自定义窗体控件，验证排序似乎正在工作，但在控件被触摸后没有调用validate方法。在我简单的自定义窗体控件中，我希望能够验证控件何时被触摸，而不仅仅是在其值发生变化之后。如何在触摸后验证自定义角度表单控件？

我怎样才能做到这一点？还是有更好的方法来获得最初的验证？

下面是一个示例组件（https://plnkr.co/edit/qAWDsH?p=preview）。我想在触摸它后自定义组件的验证失败。

这里是我的自定义控制：

@Component({ 
    selector: 'my-custom-control', 
    template: ` 

     <input type="text" 
      style="color:red;" 
      placeholder="Valid with odd # of characters" 
      #input="ngModel" 
      [(ngModel)]="text" 
      (change)="onInputChanged($event)" 
      (blur)="onBlur()" 
      (focus)="onFocus()" 
     > 

    `, 
    providers: [ 
    CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, 
    CUSTOM_CONTROL_VALIDATOR 
    ] 
}) 
export class MyCustomControl implements ControlValueAccessor, OnChanges, OnInit, Validator { 

    @Input() text: string; 
    @Input() placeholder: string; 
    @Input() required: any; 

    constructor() { 

    } 

    private onTouchedCallback:() => void = noop; 
    private onChangeCallback: (_: any) => void = noop; 

    onBlur() { 
    console.log("custom control blur"); 
    this.onTouchedCallback(); 
    } 

    onFocus() { 
    console.log("custom control focus"); 
    this.onTouchedCallback(); 
    } 

    onInputChanged() { 
    console.log("value changing"); 
    this.onChangeCallback(this.text); 
    } 

    //From ControlValueAccessor interface 
    writeValue(value: string) { 
    this.text = value; 
    } 

    //From ControlValueAccessor interface 
    registerOnChange(fn: any) { 
    this.onChangeCallback = fn; 
    } 

    //From ControlValueAccessor interface 
    registerOnTouched(fn: any) { 
    this.onTouchedCallback = fn; 
    } 

    ngOnInit() {} 
    ngOnChanges() { 
    this.onChangeCallback(this.text); 
    } 

    // From Validator interface 
    validate (c: FormControl) { 
    console.log('validating'); 
    if (this.text.length % 2) 
     return null; 

    return { 
     customError: { 
     message: "This is not valid", 

     } 
    } 
    } 

}

来源

2017-10-19 Chris Farmer

这是你在找什么？ https://plnkr.co/edit/Zjg6px0dyI4hePtwI7g4?p=preview – Vega

尝试这样的：

您可以在compoent.ts添加keyup事件这样

<input (keyup)="onKey($event)"> 
`

export class Component { 

    onKey(event:any) { 
    console.log('event', event); 
    } 
}

来源

2017-10-19 18:06:12 Chandru

但我不想输入密钥。我只是想在控件被触摸时进行验证。我误解了什么吗？ –

如何在触摸后验证自定义角度表单控件？

回答

相关问题