typescript angular 5 验证表单控件更新需要

angular 5 validation form control update with required

提问by Charles Morrison

I am using Angular 5. And How do I add required validation to an existing form control??

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

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

回答by Lakindu Gunasekara

Angular comes with a small set of pre-built validators to match the ones we can define via standard HTML5 attributes, namely required, minlegth, maxlengthand patternwhich we can access from the Validators module.

角带有一个小套预先建立验证程序以匹配我们可以通过标准的HTML5定义的那些attributes，namely required，minlegth，maxlength并且pattern我们可以从校验模块访问。

The first parameter of a FormControlconstructor is the initial value of the control, we'll leave that as empty string. The second parameter contains either a single validator if we only want to apply one, or a list of validators if we want to apply multiple validators to a single control.

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

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() 
    });
  }
}

1. We add a single required validator to mark this control as required.
2. We can also provide an array of validators.
3. We specify a pattern validator which checks whether the email contains a @ character.
4. The minlength validator checks to see if the password is a minimum of 8 characters long.
5. We don't add any validators to the language select box.

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

IN YOUR SCENARIOYou can use something like this

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

this.formSearch.controls["name"].setValidators([Validators.required]??,[Validators.minLength(1), Validators.maxLength(30)]);

Here you simply pass the FormControl an array of validators. And this will reset any existing validators you added when you created the FormControl.

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

Additionally,

此外，

1. Set a validator for a control in the FormGroup: this.formSearch.controls['name'].setValidators([Validators.required])

2. Remove the validator from the control in the FormGroup: this.formSearch.controls['name'].clearValidators()

3. Update the FormGroup once you have run either of the above lines. this.formSearch.controls['name'].updateValueAndValidity()

1. 为 FormGroup 中的控件设置验证器： this.formSearch.controls['name'].setValidators([Validators.required])

2. 从 FormGroup 中的控件中删除验证器： this.formSearch.controls['name'].clearValidators()

3. 运行上述任一行后，更新 FormGroup。 this.formSearch.controls['name'].updateValueAndValidity()