如何正确使用角度表单验证？

Question

我正在尝试将表单验证添加到我的项目中。我已经构建了一个简单的登录表单，现在我想在将不同输入字段发送到服务器之前检查它们的值，并在它们无效时向用户提供视觉反馈。我尝试关注docs，但遇到了一些问题

这是我目前写的：

<div class="content">
    <section>
        <div class="form-wrapper">
            <h3>Registrieren</h3>
            <form class="form" [formGroup]="form" (submit)="submit()">
                <div class="form-item">
                    <input type="text" formControlName="name" placeholder="Name" required>
                </div>
                <div class="form-item">
                    <input formControlName="email" type="email" placeholder="Email Addresse" required>
                </div>
                <div class="form-item">
                    <input formControlName="password" type="password" placeholder="Passwort" required>
                </div>
                <div class="form-item">
                    <button type="submit">Registrieren</button>
                </div>
            </form>
        </div>
    </section>
</div>

还有component.ts：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormControl } from '@angular/forms';
import { AuthService } from 'src/app/services/auth.service';
import { Router } from '@angular/router';
import { Validators } from '@angular/forms';

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.scss']
})
export class RegisterComponent implements OnInit {

  form: FormGroup;
  name: string = '';
  email: string = '';
  password: string = '';
  error: string = '';

  constructor( private auth: AuthService, private router: Router) { }

  ngOnInit(): void {
    this.form = new FormGroup({
      name: new FormControl(this.name,[
        Validators.required,
      ]),
      email: new FormControl(this.email,[
        Validators.required,
        Validators.pattern("^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$")
      ]),
      password: new FormControl(this.password, [
        Validators.required,
        Validators.minLength(8)
      ])
    })
  }

  submit(){
    this.auth.tryRegister(this.form.getRawValue())
    .subscribe(
      res => {
        if(res.status == 200){
          this.router.navigate(['/verify'])
        }},
      err => {
        if(err.status == 400){
          this.error = 'Invalid form data'
        }
        else if(err.status == 401){
          this.error = 'email address already in use'
        }
      })
  }
}

我想检查电子邮件地址是否有效，如果不是，我想给它我的类 .is-invalid 的样式，它在输入标签周围添加一个红色边框（如果有为此目的现有的角度 css 类，我也很乐意使用它们）

我知道这是一个非常基本且微不足道的问题，我对 Angular 不是很熟悉，所以如果你告诉我如何正确地做到这一点或链接我可以使用的任何资源，我将不胜感激。

编辑：我现在为我的属性添加了吸气剂，但它仍然不起作用。每当我尝试检查 *ngIf="name.errors?.required" 时，我都会收到错误“对象可能为空”，即使我已经使用了安全导航运算符？

Answer 1

要在 html 视图中访问 formControls，您需要在 .ts 文件中为它们创建一个 getter：

get name() {
    return this.form.get('name');
}

然后在 HTML 视图中：

<div class="error" *ngIf="name.errors?.required">
    Name is required.
</div>