Question

我正在使用Angular 5.如何将现有表单控件添加到必需的验证？

this.formSearch.get('name').clearValidators();
this.formSearch.get('name').updateValueAndValidity();

Answer 1

Angular附带一小组预先构建的验证器，以匹配我们可以通过标准HTML5 attributes，namely required，minlegth，maxlength和{{ 1}}我们可以从Validators模块访问。

pattern构造函数的第一个参数是控件的初始值，我们将其保留为空字符串。如果我们只想应用一个验证器，则第二个参数包含单个验证器;如果我们想要将多个验证器应用于单个控件，则第二个参数包含验证器列表。

FormControl

我们添加了一个必需的验证器来根据需要标记此控件。
我们还可以提供一系列验证器。
我们指定一个模式验证器，用于检查电子邮件是否包含@字符。
minlength验证器检查密码是否至少为8个字符。
我们不会在语言选择框中添加任何验证器。

在你的场景中 你可以使用这样的东西

import { FormGroup, FormControl, Validators } from '@angular/forms';

class ModelFormComponent implements OnInit {
  myform: FormGroup;

  ngOnInit() {
    myform = new FormGroup({
        name: new FormGroup({
            firstName: new FormControl('', Validators.required),
            lastName: new FormControl('', Validators.required),
        }),
        email: new FormControl('', [ 
            Validators.required,
            Validators.pattern("[^ @]*@[^ @]*") 
        ]),
        password: new FormControl('', [
            Validators.minLength(8), 
            Validators.required
        ]),
        language: new FormControl() 
    });
  }
}

在这里，您只需将FormControl传递给验证器数组。这将重置您在创建FormControl时添加的任何现有验证器。

此外，

在FormGroup中为控件设置验证器：this.formSearch.controls["name"].setValidators([Validators.required]‌,[Validators.minLength(1), Validators.maxLength(30)]);
从FormGroup中的控件中删除验证器： this.formSearch.controls['name'].setValidators([Validators.required])
运行上述任一行后，更新FormGroup。 this.formSearch.controls['name'].clearValidators()

角度5验证表格控制更新与要求

1 个答案: