【问题标题】:Angular 4 Expression Changed After It Has Been Checked ErrorAngular 4 表达式在检查错误后更改
【发布时间】:2017-12-11 13:24:55
【问题描述】:

在检查表单是否有效后,我从响应式表单中收到此错误ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'false'. Current value: 'true'.

creatForm

  public createForm() {
    this.loginForm = new FormGroup({
      email: new FormControl('', [
        Validators.required,
        this.patternValidator(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/)
      ]),
      password: new FormControl('', [
        Validators.required,
        Validators.minLength(6)
      ])
    });
    this.guestForm = new FormGroup({
      guestName: new FormControl('', [
        Validators.required
      ]),
      guestCode: new FormControl('', [
        Validators.required,
        Validators.minLength(8)
      ])
    });
  }

这是表格

    <form [formGroup]="loginForm" (ngSubmit)="couplelogin(user)" novalidate>
      <div id="couple_login_form" class="login-form">
        <div class="login-field" [ngClass]="{'pattern' : !loginForm.controls.email.valid && loginForm.controls.email.touched, 'error' : loginForm.controls.email.pristine && loginForm.controls.email.touched, 'focus' : loginForm.controls.email.dirty}">
          <label for="email_login" translate="HOME.EMAIL_FORM">E-Mail</label>
          <input type="email" formControlName="email" [(ngModel)]="user.email" name="email">
          <div class="message text-center">
            <p translate="HOME.FORM_REQUIRED">This field is required</p>
          </div>
          <div class="pattern text-center">
            <p translate="HOME.ERROR_FORMAT">Enter a valid email.</p>
          </div>
        </div>
        <div class="login-field" [ngClass]="{'error' : loginForm.controls.password.pristine && loginForm.controls.password.touched, 'focus' : loginForm.controls.password.dirty}">
          <label for="pass_login" translate="HOME.PASSWOR_FORM">Password</label>
          <input type="password" [(ngModel)]="user.password" name="password" formControlName="password">
          <div class="message text-center">
            <p translate="HOME.FORM_REQUIRED">This field is required</p>
          </div>
        </div>
        <p class="text-center bottom-msg-login" translate="HOME.FORM_MESSAGE">Don't have an account yet? Download the app für Android or iOS, sign in and create your wedding!</p>
        <button class="submit" type="submit" name="couple" [disabled]="!loginForm.valid" translate="HOME.LOGIN">Login</button>
      </div>
    </form>

现在,我正在使用 firebase 进行用户身份验证,我正在使用 angular 4 验证电子邮件字段,但是当我使用 firebase 进行验证检查电子邮件格式是否正确时,错误消失了,任何想法.

【问题讨论】:

    标签: angular


    【解决方案1】:

    对于验证电子邮件,您可以这样做

        'email': [null, [
            Validators.required, Validators.email
        ]],
    

    然后删除所有[(ngModel)]="user.XXX"name="XXX"

    改变

    <form [formGroup]="loginForm" (ngSubmit)="couplelogin(loginForm.value)">
    

    【讨论】:

    • 我尝试以这种方式验证电子邮件,但仍然收到相同的错误。
    • 对不起,你是对的,问题是[(ngModel)]="user.XXX",我删除了表格并将其更改为&lt;form [formGroup]="loginForm" (ngSubmit)="couplelogin(loginForm.value)"&gt;,而没有更改this.patternValidator(/^(([^&lt;&gt;()\[\]\\.,;:\s@"]+(\.[^&lt;&gt;(....
    猜你喜欢
    • 2018-05-11
    • 2017-10-19
    • 2019-05-14
    • 2019-01-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-09-15
    • 1970-01-01
    相关资源
    最近更新 更多