相关疑难解决方法(0)

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

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

模板:

<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>
Run Code Online (Sandbox Code Playgroud)

登录方式:

 @ViewChild('loginForm') loginForm: HTMLFormElement;

 private login(formData: any): void {
    this.authService.login(formData).subscribe(res => …
Run Code Online (Sandbox Code Playgroud)

validation angular2-forms angular

139
推荐指数
6
解决办法
17万
查看次数

标签 统计

angular ×1

angular2-forms ×1

validation ×1