Angular中FormGroup是否已废弃？响应式表单报错与样式不生效问题求助

先给你吃个定心丸：FormGroup没被废弃！ #

FormGroup是Angular响应式表单的核心组件，从Angular 2一直到现在的最新版本，官方都在稳定维护和支持它，你完全可以放心用它来构建表单。

咱们逐个解决你遇到的问题： #

1. 控制台报错：Expected validator to return Promise or Observable. #

这个错是因为你定义表单控件时，同步验证器的写法不对。

在FormBuilder.group()里，每个控件的配置格式是：[初始值, [同步验证器数组], [异步验证器数组]]。你现在把多个同步验证器分开传了（比如firstName: ['',Validators.required,Validators.minLength(3)]），这会让Angular把第三个参数当成异步验证器，但Validators.minLength是同步的，自然就报错了。

修复后的ngOnInit代码：

ngOnInit() {
  this.registerForm = this.formBuilder.group({
    firstName: ['', [Validators.required, Validators.minLength(3)]], // 所有同步验证器放进一个数组
    lastName: ['', [Validators.required, Validators.minLength(2)]],
    email: ['', [Validators.required, Validators.email]],
    password: ['', Validators.required],
    confirmPassword: ['', Validators.required],
    acceptTandC : [false, Validators.requiredTrue]
  },{ validators: PasswordCheck('password','confirmPassword') });
}

2. 页面底部p标签看不到内容 #

看你HTML里的p标签：class="text white"是错的！Bootstrap的文本白色类是text-white（连在一起写），你分开写的话样式不生效，文字和背景色混在一起，自然看不见。

修复后的p标签：

<p class="text-white">表单值：{{ registerForm.value | json }}</p>
<p class="text-white">表单是否有效：{{ registerForm.valid | json }}</p>

3. is-invalid类加不上 #

这个问题要结合两个点修复：

• 首先得把第一个问题的验证器格式修好，不然控件的errors属性根本不会正确触发；
• 其次，你现在的错误提示是一直显示的，应该用*ngIf条件渲染，同时优化is-invalid的判断逻辑。

修复后的表单控件示例（拿firstName举例）：

<div class="form-group col-6">
  <label>First Name</label>
  <input type="text" class="form-control" formControlName="firstName" 
         [ngClass]="{ 'is-invalid': submitted && h.firstName.invalid }" />
  <!-- 只在有对应错误时显示提示 -->
  <div class="text-warning" *ngIf="submitted && h.firstName.errors?.required">
    First Name is required
  </div>
  <div class="text-warning" *ngIf="submitted && h.firstName.errors?.minlength">
    First Name must be at least 3 characters
  </div>
</div>

另外，你把表单提交事件绑错地方了！(ngSubmit)应该绑在<form>标签上，按钮用type="submit"，这样才符合表单的正确提交逻辑：

<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
  <!-- 其他表单内容 -->
  <button class="btn btn-success btn-lg px-4 mr-3" type="submit">Register</button>
</form>

额外提醒 #

你的自定义验证器PasswordCheck要确保返回正确的验证器函数，比如当密码不匹配时，要返回{ passwordMismatch: true }这样的错误对象，这样才能在模板里判断这个错误并显示提示。

内容的提问来源于stack exchange，提问作者Aakash Tiwari