Angular：无法绑定到“ngModelOptions”，因为它不是“输入”的已知属性

Question

我的验证有问题。我想为我的电子邮件输入添加验证，但我收到错误“无法绑定到 'ngModelOptions'，因为它不是 'input' 的已知属性”。

添加组件.html

<form name="form" [formGroup]="form" (ngSubmit)="form.valid" class="form">
<mat-form-field>
    <input matInput
           placeholder="Adres e-mail"
           formControlName="email"
           [(ngModel)]="employee.email"
           [ngModelOptions]="{standalone: true}"
           [ngClass]="{'is-invalid':form.get('email').touched && form.get('email').invalid}"
           type="email"
           required>
           <div *ngIf="form.get('email').touched && form.get('email').invalid"  class="invalid-feedback">
              <div *ngIf="form.get('email').errors.required">Email Name is required</div>
              <div *ngIf="form.get('email').errors.email">Email must be a valid email Address</div>
           </div>
  </mat-form-field>

add-component.ts

form = new FormGroup({
    email: new FormControl('', [
      Validators.required,
      Validators.email
    ])
  });

我已经在 app.module.ts 中包含了 FormsModule、ReactiveFormsModule。

Answer 1

自 AngularJS 以来，Angular 中的 ngModelOptions 指令已更改。许多功能以角度删除。来自角度文档：

跟踪此 ngModel 实例的配置选项。

name：在表单控件元素上设置名称属性的替代方法。请参阅使用 NgModel 作为独立控件的示例。

standalone：当设置为 true 时，ngModel 将不会在其父表单中注册自己，并且就像它不在表单中一样。默认为 false。

updateOn：定义表单控件值和有效性更新的事件。默认为“更改”。可能的值：'改变' | '模糊' | '提交'。

Angular 的验证方式是使用 FormControl：

emailFormControl = new FormControl('', [
  Validators.required,
  Validators.email,
]);

你可以在这个DEMO看到

已编辑，感谢@ConnorsFan 的评论。