使用 NgModel angular 7 进行表单验证答案

【问题标题】：Form validation with NgModel angular 7使用 NgModel angular 7 进行表单验证
【发布时间】：2019-06-23 20:26:23
【问题描述】：

我不知道我的 Ngclass 是怎么不工作的，如果你找到了解决方案，非常感谢你

在我的 HTML 中：

<form [formGroup]="pageForm">
 ... 
 <input [(ngModel)]="namePage" type="text" class="form-control">
 ... 

<div class="d-flex mt-4">
  <i [ngClass]="{ 'is-valid': !f.name.errors }"></i>
</div>

</form>

在我的 TS 中：

pageForm: FormGroup;
namePage: string;

// the form
this.pageForm = new FormGroup({
  name: new FormControl([this.namePage, Validators.required]),
 });

get f() {
 return this.pageForm.controls;
}

【问题讨论】：

如果你使用 ReactiveForm (formGroup) 不使用 [ngModel]，正确的 sintax 是<input formControlName="name">
@Eliseo 谢谢，但我需要我的 ngmodel 因为这个名称必须在另一个地方实时更改
@Juan Oh 逃避我。它是 ngclass 不是 ngstyle。我的错
你总是可以写 {{pageForm.get('namePage').value}}，或者使用 getter。当您在 Reactive 表单中使用 [(ngModel)] 时，是为了管理不在表单中的变量，您需要使用 [ngModelOptions]="{standalone:true}"

标签： angular forms validation ngmodel

【解决方案1】：

试试


isValid: boolean = false;

get f() {
 this.isValid = this.pageForm.valid;
}

<form [formGroup]="pageForm"  (ngSubmit)="f()">
 ... 
 <input [(ngModel)]="namePage" type="text" class="form-control">
 ... 

<div class="d-flex mt-4">
  <i [ngClass]="{ 'is-valid': isValid }"></i>
</div>

</form>

【讨论】：

创建一个变量。不要调用该函数。
提交表单时调用获取 f。