如何手动将Angular表单字段设置为无效?

在组件:

formData.form.controls['email'].setErrors({'incorrect': true});

在HTML中:

<input mdInput placeholder="Email" type="email" name="email" required [(ngModel)]="email"  #email="ngModel">
<div *ngIf="!email.valid">\{\{email.errors| json}}</div>

补充茱莉亚·帕斯科娃的答案

在组件中设置验证错误:

formData.form.controls['email'].setErrors({'incorrect': true});

清除组件中的验证错误:

formData.form.controls['email'].setErrors(null);

使用null清除错误时要小心，因为这将覆盖所有错误。如果你想保留一些，你可能必须先检查是否存在其他错误:

if (isIncorrectOnlyError){
formData.form.controls['email'].setErrors(null);
}

在material 2的新版本中，它的控件名称以mat前缀setErrors()开始不起作用，相反，Juila的答案可以更改为:

formData.form.controls['email'].markAsTouched();

我试图在模板形式的ngModelChange处理程序中调用setErrors()。它没有工作，直到我用setTimeout()等待一个滴答:

模板:

<input type="password" [(ngModel)]="user.password" class="form-control"
id="password" name="password" required (ngModelChange)="checkPasswords()">


<input type="password" [(ngModel)]="pwConfirm" class="form-control"
id="pwConfirm" name="pwConfirm" required (ngModelChange)="checkPasswords()"
#pwConfirmModel="ngModel">


<div [hidden]="pwConfirmModel.valid || pwConfirmModel.pristine" class="alert-danger">
Passwords do not match
</div>

组件:

@ViewChild('pwConfirmModel') pwConfirmModel: NgModel;


checkPasswords() {
if (this.pwConfirm.length >= this.user.password.length &&
this.pwConfirm !== this.user.password) {
console.log('passwords do not match');
// setErrors() must be called after change detection runs
setTimeout(() => this.pwConfirmModel.control.setErrors({'nomatch': true}) );
} else {
// to clear the error, we don't have to wait
this.pwConfirmModel.control.setErrors(null);
}
}

像这样的陷阱让我更喜欢反应式。

下面是一个有效的例子:

MatchPassword(AC: FormControl) {
let dataForm = AC.parent;
if(!dataForm) return null;


var newPasswordRepeat = dataForm.get('newPasswordRepeat');
let password = dataForm.get('newPassword').value;
let confirmPassword = newPasswordRepeat.value;


if(password != confirmPassword) {
/* for newPasswordRepeat from current field "newPassword" */
dataForm.controls["newPasswordRepeat"].setErrors( {MatchPassword: true} );
if( newPasswordRepeat == AC ) {
/* for current field "newPasswordRepeat" */
return {newPasswordRepeat: {MatchPassword: true} };
}
} else {
dataForm.controls["newPasswordRepeat"].setErrors( null );
}
return null;
}


createForm() {
this.dataForm = this.fb.group({
password: [ "", Validators.required ],
newPassword: [ "", [ Validators.required, Validators.minLength(6), this.MatchPassword] ],
newPasswordRepeat: [ "", [Validators.required, this.MatchPassword] ]
});
}

虽然已经晚了，但下面的解决方案对我有用。

    let control = this.registerForm.controls['controlName'];
control.setErrors({backend: {someProp: "Invalid Data"}});
let message = control.errors['backend'].someProp;

对于单元测试:

spyOn(component.form, 'valid').and.returnValue(true);

在我的反应式形式，我需要标记一个字段无效，如果另一个字段被选中。在ng版本7中，我做了以下工作:

    const checkboxField = this.form.get('<name of field>');
const dropDownField = this.form.get('<name of field>');


this.checkboxField$ = checkboxField.valueChanges
.subscribe((checked: boolean) => {
if(checked) {
dropDownField.setValidators(Validators.required);
dropDownField.setErrors({ required: true });
dropDownField.markAsDirty();
} else {
dropDownField.clearValidators();
dropDownField.markAsPristine();
}
});

所以在上面，当我选中这个框时，它会根据需要设置下拉框，并将其标记为脏。如果您不这样标记它，那么直到您尝试提交表单或与之交互时，它才会无效(错误)。

如果复选框被设置为false(未选中)，那么我们清除下拉菜单上所需的验证器，并将其重置为原始状态。

另外，记得取消订阅监控字段更改!

你也可以将viewChild的“类型”更改为NgForm，如下所示:

@ViewChild('loginForm') loginForm: NgForm;

然后以@Julia提到的相同方式引用控件:

 private login(formData: any): void {
this.authService.login(formData).subscribe(res => {
alert(`Congrats, you have logged in. We don't have anywhere to send you right now though, but congrats regardless!`);
}, error => {
this.loginFailed = true; // This displays the error message, I don't really like this, but that's another issue.


this.loginForm.controls['email'].setErrors({ 'incorrect': true});
this.loginForm.controls['password'].setErrors({ 'incorrect': true});
});
}

将Errors设置为null将清除UI上的错误:

this.loginForm.controls['email'].setErrors(null);

      required minlength="4" appForbiddenName="bob"
[(ngModel)]="hero.name" #name="ngModel">


<div *ngIf="name.invalid && (name.dirty || name.touched)"
class="alert">


<div *ngIf="name.errors?.['required']">
Name is required.
</div>
<div *ngIf="name.errors?.['minlength']">
Name must be at least 4 characters long.
</div>
<div *ngIf="name.errors?.['forbiddenName']">
Name cannot be Bob.
</div>


</div>