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


190

我正在使用登录表单,如果用户输入无效的凭据,我们希望将电子邮件和密码字段都标记为无效,并显示一条消息,指出登录失败。如何从可观察的回调中将这些字段设置为无效?

模板:

<form #loginForm="ngForm" (ngSubmit)="login(loginForm)" id="loginForm">
  <div class="login-content" fxLayout="column" fxLayoutAlign="start stretch">
    <md-input-container>
      <input mdInput placeholder="Email" type="email" name="email" required [(ngModel)]="email">
    </md-input-container>
    <md-input-container>
      <input mdInput placeholder="Password" type="password" name="password" required [(ngModel)]="password">
    </md-input-container>
    <p class='error' *ngIf='loginFailed'>The email address or password is invalid.</p>
    <div class="extra-options" fxLayout="row" fxLayoutAlign="space-between center">
     <md-checkbox class="remember-me">Remember Me</md-checkbox>
      <a class="forgot-password" routerLink='/forgot-password'>Forgot Password?</a>
    </div>
    <button class="login-button" md-raised-button [disabled]="!loginForm.valid">SIGN IN</button>
     <p class="note">Don't have an account?<br/> <a [routerLink]="['/register']">Click here to create one</a></p>
   </div>
 </form>

登录方式:

 @ViewChild('loginForm') loginForm: HTMLFormElement;

 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.invalid = true;
      this.loginForm.controls.password.invalid = true; 
    });
  }

除了将输入无效标志设置为true之外,我还尝试将email.valid标志设置为false,并将其也设置loginForm.invalid为true。这些都不会导致输入显示其无效状态。


后端使用的端口是否不同于角度端口?如果是这样,这可能是CORS问题。您在后端使用什么框架。
Mike3355 '17

您可以使用setErros方法。提示:您应该在组件文件上添加所需的验证器。还有没有特定的原因将ngModel与反应形式一起使用?
developer033

@ developer033在这里参加聚会有点晚,但是那些看起来不像是反应式表单,而是模板驱动的表单。
thenetimp

Answers:


260

在组件中:

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>

13
以及随后如何消除错误?setErrors({'incorrect': false})还是setErrrors({})不为我工作
Robouste

3
我可以将整个反应形式设置为有效还是无效,而不是重置字段?
xtremist

29
@Robouste,您可以通过setErrrors(null)
以下方式

5
除了这个答案:如果没有formData.form.controls['email'].markAsTouched();下面提到的@ M.Farahmand,此代码对我不起作用。setErrors({'incorrect': true})仅使用设置ng-invalidCSS类进行输入。希望对您有所帮助。
巴拉巴斯'18

3
而且,如果还有更多验证器(如“ required”),setErrors(null)会删除该错误吗?
Please_Dont_Bully_Me_SO_Lords '19

87

添加到朱莉娅·帕森科娃的答案

要在组件中设置验证错误:

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

取消设置组件中的验证错误:

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

小心使用来设置错误,null因为这将覆盖所有错误。如果要保留一些错误,则可能必须先检查是否存在其他错误:

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

3
是否可以使用诸如formData.form.controls ['email']。setErrors({'incorrect':false})之类的方法来取消验证错误?
rudrasiva86

1
反应形式呢?
塞德·梅赫梅多维奇

25

我试图以setErrors()模板形式在ngModelChange处理程序中调用。直到我等了一下,它才起作用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);
  }
}

这样的陷阱使我更喜欢反应形式。


Cannot find name 'NgModel'.@ViewChild('pwConfirmModel') pwConfirmModel: NgModel;针对此问题的任何修复的错误
Deep 3015 '18

必须使用setTimeOuts怎么办?我注意到了这一点,并且看起来控件并没有立即对其进行更新。这引入了许多hacky代码来解决此限制。
杰克·沙克斯沃思

谢谢。我知道,setErrors但是直到我使用它才起作用setTimeout
Sampgun

25

在材料2的新版本中,其控件名称以毡垫前缀setErrors()开头不起作用,而是可以将Juila的答案更改为:

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

1

这是一个有效的示例:

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

这可能是“ hacky”,但我喜欢它,因为您不必设置自定义ErrorStateMatcher即可处理Angular Material Input错误!
David Melin

1

在我的反应形式中,如果选中了另一个字段,则需要将一个字段标记为无效。在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(未选中),则我们清除下拉列表中所需的验证器,并将其重置为原始状态。

另外-记得退订监视字段更改!


1

您也可以将viewChild'type'更改为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});
    });
  }

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

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

0

虽然它晚了但是下面的解决方案对我有用。

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

3
最后一行在做什么?
汤姆·布里托

-9

对于单元测试:

spyOn(component.form, 'valid').and.returnValue(true);
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.