5

快速提问。这是那些令人讨厌的小错误之一。我在延迟加载的注册模块中有一个 Angular 反应形式。代码结构如下：

TS

get email() {
  return this.myForm.get('email');
}
// This code works from within the component, but not when referenced from within the template.

HTML

<div class="errors" *ngIf="email.errors?.required && email.touched">Must enter email</div>

在模板中，永远不会显示 div，因为表达式永远不会计算为真，即使存在错误也是如此。我已经在控制台中检查了。

更令人困惑的是，我在component.ts使用. 这很好用。但不在模板中。console.logconsole.log(this.email.errors)

我凌乱的解决方案是直接访问错误，这确实有效：

<div class="errors" *ngIf="myForm.controls.email.errors.required && myForm.controls.email.touched">
  Must enter email
</div>
// This works! As you can see the expression is very long and messy.

任何帮助表示赞赏！

4

2 回答 2

2

您是否有机会#email在输入字段中使用模板引用变量，例如：<input #email ...>？

这将解释问题。我做了一个重现错误的 Stackblitz：https ://stackblitz.com/edit/angular-qyt7kb

在该示例中，firstName 输入具有模板引用变量 #firstName 并且永远不会显示错误 div。lastName 错误 div 正确显示。

<form [formGroup]="form">

    <label>
      First Name:
      <input #firstName type="text" formControlName="firstName">
    </label>
    <div *ngIf="firstName.errors?.required && firstName.touched">*FIRST Name is Required</div>

    <label>
      Last Name:
      <input type="text" formControlName="lastName">
    </label>
    <div *ngIf="lastName.errors?.required && lastName.touched">*LAST name is Required</div>

</form>

所以看起来在模板中，模板引用变量优先于TS文件中同名的getter。在示例中，您可以看到 console.log 正如您所说的那样正确打印错误。

于 2020-01-10T05:17:20.063 回答
0

为了使用响应式表单，请确保您在模板中使用formGroup和formControlName指令，如下所示：

<form (ngSubmit)="submit()" [formGroup]="myForm">
    <label for="username">Username</label>
    <input type="text" id="username" formControlName="username">
    <span *ngIf="username.getError('required') &&
              (username.dirty || username.touched)">
      Username is required
    </span>

    <label for="password">Password</label>
    <input type="password" id="password" formControlName="password">
    <span *ngIf="myForm.get('password').getError('required') &&
              (myForm.get('password').dirty || myForm.get('password').touched)">
      Password is required
    </span>

    <input type="submit" value="Submit">
</form>

然后定义您的FormGroup实例、验证器和 getter 函数：

  myForm: FormGroup = new FormGroup({
    username: new FormControl('', Validators.required),
    password: new FormControl('', Validators.required),
  });

  get username() {
    return this.myForm.get('username');
  }

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

之后，您可以使用 getter 函数进行验证（作为模板中的用户名）或使用直接引用myForm.get('password').getError('required')（作为模板中的密码）。

在此处查看应用两种方式访问​​ Angular 反应式表单错误的登录示例：https ://stackblitz.com/edit/reactive-forms-get-errors

让我知道这是否有帮助！

于 2020-01-09T03:35:40.170 回答