在 Angular 中使用反应形式触及并有效

Question

如何在 angular 中使用响应式表单使用 touched 和 valid 属性 4. 我在模板驱动表单中使用过，您只需将此 <span class="text-muted" *ngIf="!fname.valid && fname.touched"> Please enter a valid first name</span> 放在输入字段下方即可。我还了解到反应式形式会更好，因为您必须在 component.ts 中编写逻辑。所以我希望它以反应形式实现，并且我坚持如何使用 touched 和 valid 属性。

html

<form [formGroup]="form" (ngSubmit)="onSignIn(form)">
    <div class="form-group">
        <input type="text" class="form-control" id="email" placeholder="Enter email" formControlName="email">
    </div>
    <div class="form-group">
        <input type="password" class="form-control" id="password" placeholder="Password" formControlName="password">
    </div><button class="btn btn-primary btn-block" type="submit" [disabled]="!form.valid">Sign In</button>
</form>

ts

 ngOnInit() {
    this.form = this.formBuilder.group({
      email: [null, [Validators.required, Validators.email]],
      password: [null, Validators.required],
    });
  }

  onSignIn(form: FormGroup){
    const email = form.value.email;
    const password = form.value.password;
    this.authService.loginUser(email, password)
    .subscribe(
      data => {
        this.router.navigate(['/settings']);
        alert("Login Successful");
        console.log(data);
      },
      error => {
        alert("Invalid Email or Password");
        console.log(error);
      });
  }

Answer 1

你可以用类似的方式使用它。要获取 FormControl，请在 FormGroup 对象上使用 get 方法，然后使用 hasError:

// in your template
form.get('email').hasError('required') && form.get('email').touched
form.get('email').hasError('email') && form.get('email').touched
form.get('password').hasError('required') && form.get('password').touched

您还可以在组件中为此创建一些不错的 methods/getters。

<form [formGroup]="form" (ngSubmit)="onSignIn(form)">
    <div class="form-group">
        <input type="text" class="form-control" id="email" placeholder="Enter email" formControlName="email">
      <span class="text-muted" *ngIf="form.get('email').hasError('required') && form.get('email').touched">Email is required</span>
    </div>
    <div class="form-group">
        <input type="password" class="form-control" id="password" placeholder="Password" formControlName="password">
         <span class="text-muted" *ngIf="form.get('password').hasError('required') && form.get('password').touched">Password is required</span>
    </div><button class="btn btn-primary btn-block" type="submit" [disabled]="!form.valid">Sign In</button>
</form>

Answer 2

试试这个

<span class="text-muted" *ngIf="!form.controls['email'].valid && 
                 form.controls['email']?.touched"> Please enter a valid first name</span>

在 Angular 中使用反应形式触及并有效

touched and valid using reactive forms in Angular

angular

angular-reactive-forms