Question

我的响应式表单 (Angular 11) 出现错误。

当我想在我输入的电子邮件和密码尚未设置时显示错误消息，但出现错误时 对象可能为空

我的 login.component.html

<div class="row mt-5">
    <div class="col-md-6 mx-auto">
      <form [formGroup]="loginForm">
  
        <div class="form-group">
          <label for="email">Email</label>
          <input
            formControlName="email"
            type="text"
            class="form-control"
            id="email"
            required
          >
  
          <div Class="text-danger">
            <div *ngIf="loginForm.get('email').hasError('required')">Email is Required !</div>
          </div>
        </div>
  
        <div class="form-group">
          <label for="password">Password</label>
          <input
            formControlName="password"
            type="password"
            class="form-control"
            id="password"
            required
          >
  
          <div Class="text-danger" >
            <div *ngIf="loginForm.get('password').hasError('required')">Password is Required !</div>
            <div *ngIf="loginForm.get('password').hasError('minlength')">Password was to be 8 Caracters !</div>
          </div>
        </div>
        {{loginForm.value | json}}
        <button [disabled]="loginForm.invalid" class="btn btn-primary btn-block">Sign In</button>
      </form>
    </div>
  </div>

我的 login.component.ts

loginForm: FormGroup ;

  constructor() { }

  ngOnInit(): void {
    this.loginForm = new FormGroup({
      email: new FormControl(null, [Validators.required]),
      password: new FormControl(null, [Validators.required, Validators.minLength(8)])
    });
  }

  get email() { return this.loginForm.get('email'); }

  get password() { return this.loginForm.get('password'); }

你能告诉我为什么我没有收到错误消息并且我有一个名为对象可能为空的编译错误。在 app.module.ts 文件中，我在导入部分有 formsModule 和 ReactiveModule。

Answer 1

像这样尝试 -

在您的组件中，只需创建一个函数并删除您为每个控件创建的两个函数 - 电子邮件和密码。

 get inputRequired() { return this.loginForm.controls; }

在你的 HTML 中 -

 <div *ngIf="inputRequired.email.errors" class="text-danger">
    <div *ngIf="inputRequired.email.errors.required">Email is Required !</div>
 </div>

我刚刚向您展示了电子邮件，同样您也可以在密码字段中这样做。

Answer 2

这是因为您正在 ngOnInit 中创建表单。您可以将其移动到构造函数中。此外，您可以使用 getter 来简化逻辑，并在检查验证错误时避免进一步的编译问题。

  <form [formGroup]="loginForm">
  
    <div class="form-group">
      <label for="email">Email</label>
      <input
        formControlName="email"
        type="text"
        class="form-control"
        id="email"
        required
      >

      <div Class="text-danger">
        <div *ngIf="email.hasError('required')">Email is Required !</div>
      </div>
    </div>

    <div class="form-group">
      <label for="password">Password</label>
      <input
        formControlName="password"
        type="password"
        class="form-control"
        id="password"
        required
      >

      <div Class="text-danger" >
        <div *ngIf="password.hasError('required')">Password is Required !</div>
        <div *ngIf="password.hasError('minlength')">Password was to be 8 Caracters !</div>
      </div>
    </div>
    {{loginForm.value | json}}
    <button [disabled]="loginForm.invalid" class="btn btn-primary btn-block">Sign In</button>
  </form>

loginForm: FormGroup ;

  constructor() { 

    this.loginForm = new FormGroup({
      email: new FormControl(null, [Validators.required]),
      password: new FormControl(null, [Validators.required, Validators.minLength(8)])
    });
  }

  ngOnInit(): void {
  }

  get email() { return this.loginForm.get('email') as FormControl; }

  get password() { return this.loginForm.get('password') as FormControl; }

Angular 反应形式不显示错误消息

2 个答案: