Angular 中带有警告的 FormGroup答案

【问题标题】：FormGroup with warning in AngularAngular 中带有警告的 FormGroup
【发布时间】：2020-08-25 03:51:06
【问题描述】：

我正在尝试验证我的表单并发出警告。

我已阅读this post。这适用于FormControl。但我还需要FormGroup 和FormArray 可以检查子控件是否有警告。

export class FormControlWarn extends FormControl {
  warnings: any;

  get warn(): boolean {
    return this.warnings != null;
  }
}

export class FormArrayWarn extends FormArray {
  get warn(): boolean {
    // return true if any controls under this FormArray have warning.
  }
}

export class FormGroupWarn extends FormGroup {
  get warn(): boolean {
    // return true if any controls under this FormGroup have warning.
  }
}

我想利用FormBuilder 的好处创建我的FormGroup。但是formBuilder.group()返回裸FormGroup，貌似不能返回自定义类。

我可以使用FormBuilder 创建自定义的FormGroup 类吗？

【问题讨论】：

FormGroup、FromArray 或 FormControl 可能无效，您可以提交表单。为什么不？真的我不知道创建“警告”是什么意思。如果需要，覆盖 ng-invalid 类
'warning' 应该在验证时显示一条消息，例如 <div *ngIf="control.warnings?.required">warning message</div>。但是表单不是无效的，操作者可以提交表单。
我想说，如果你使用“正常”的错误控制，你写<div *ngIf="control.errors?.required">，为什么要重新发明轮子？ nobody 强制您不要发送无效的表单或禁用无效的按钮
这似乎是一个糟糕的用户体验

标签： angular typescript

【解决方案1】：

FormBuilder 是一个实用类，它只包装了 FormControl、FormGroup 和 FormArray 的构造函数，允许您在定义表单时减少无休止的 new FormControl() 构造函数调用的重复次数。

如果您通过扩展现有表单控件来添加自己的表单控件，您还应该创建自己的MyFormBuilder，然后添加适合您的用例的方法。 Angular car（或不应该）对你从现有类扩展的随机类做任何事情。

【讨论】：