如何正确使用 angular 表单验证？

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'
        }
      })
  }
}

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

我知道这是一个非常基本和琐碎的问题，我对 angular 不是很熟悉，所以如果你告诉我如何正确地做或者 link 我可以使用任何资源非常感谢。

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

Answer 1

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

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

然后在 HTML 视图中：

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

如何正确使用 angular 表单验证？

How do I properly use angular form validiation?

typescript

angular

angular-forms