使用 NgModel 角度进行表单验证 7.

Question

我不知道我的 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;
}

Answer 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>