Question

我使用FormBuilder方法制作了一个表单。现在我想添加一些模式验证。

我添加了验证，它运行正常。但验证错误在非所需时间显示。

我添加了一个textfield并添加了pattern验证。当另一个控件被选中或失去焦点时，我想显示错误消息。但是，一旦我开始输入文本，目前就会显示验证错误。

我可以在丢失焦点事件中显示错误消息。我知道我可以通过onChange TextControl {{1}}事件中的方法绑定来轻松实现，但如果有其他方法，我很乐意知道。

Here is the Plnkr

Answer 1

是的，您可以在特定的一个控制值更改上订阅valuechange。

例如 **

第一种方法

 import...
    @Component({..})
    export class ExampleComponent implements OnInit {

         ngOnInit(): void {
                this.formName.get('name')
                    .valueChanges
                    .filter((value: string) => value != null && value.length > 0) // use filter if needed otherwise remove it
                    .subscribe((value: string) => {
                         if (!value.match(/[-!$%^&*(/]/... set here your pettern)) {
                                  this.formName.controls.name.setErrors({});
                             }
                    }

            }
        }

第二种方法

<强> HTML

<input type='text' (blur)="checkValidation()" formControlName="name">

组件中的方法

import...
    @Component({..})
    export class ExampleComponent implements OnInit {
    errorMessage ='';
         ngOnInit(): void {

            }

      checkValidation(): void {
            if (!value.match(/[-!$%^&*(/]/... set here your pettern)) {
                this.formName.controls.name.setErrors({});
                 this.errorMessage = 'set here your message';
              }
        }

如何在控件失去焦点时显示模式验证错误 - Angular 2

1 个答案: