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

Question

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

我添加了验证，它工作正常。但验证错误显示在非预期时间。

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

我可以在失去焦点事件中显示错误消息吗？我知道我可以通过在TextControl 的onChange 事件中绑定一个方法来轻松做到这一点，但如果有另一种方法，我很想知道。

Here is the Plnkr

Answer 1

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

举例 **

第一种方法

 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">

{{errorMessage}}

组件中的方法

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';
              }
        }