使用表单生成器自定义表单控件属性答案

【问题标题】：Custom form control property using form builder使用表单生成器自定义表单控件属性
【发布时间】：2018-03-21 00:36:49
【问题描述】：

有没有办法使用 Angular 中的表单构建器添加一个名为 filterMode 的自定义属性？我正在创建一个搜索表单，但希望能够将过滤器类型绑定到它，例如startsWith、contains、equal 等。当我获得FormGroup 时，我希望能够访问每个表单控件的这个值控制对象。

例如：

public queryForm: FormGroup;


constructor(
    private fb: FormBuilder,
  ) {
    this.queryForm = this.fb.group({
      username: [value: '', filterMode:'contains'],
      email: [value: '', filterMode:'contains'],
    });
  }

有没有办法在 Angular 中扩展 FormGroup？

【问题讨论】：

听起来你想要一个自定义验证器？
@Chrillewoodz 不是自定义验证器，而是当我获得 FormGroup -> controls 对象时可以看到的自定义属性。我希望能够访问用户名控件并查看它的 filterMode 为 contains 例如。
据我所知，您将为这个用例创建一个验证器。然后，您可以将您的论点提供给验证器，并根据您提供的内容更新有效性。
如果我不尝试验证字段，而只是在表单组上添加一个我可以访问的属性，那么使用验证器属性是否有意义？
你打算用这个属性做什么？以前从未遇到过您的用例，理论上验证器应该按照名称倾斜的方式进行操作，即仅进行验证。未设置属性。

标签： angular

【解决方案1】：

你可以在控件上创建一个属性，毕竟它只是一个对象，而Javascript允许你重写对象。

简单地说。

constructor(public fb: FormBuilder) {
  this.form = this.fb.group({
    name: ['']
  });

}

ngAfterViewInit() {
  this.form.get('name')['filterMode'] = 'contains';
}

Here is a working example。

【讨论】：

【解决方案2】：

您需要使用值访问器创建组件。

参考：https://angular.io/api/forms/ControlValueAccessor

这个想法是您构建组件，实现值访问器和接口方法，然后您可以将该组件用作复杂的表单组元素..类似于：

constructor(
    private fb: FormBuilder,
  ) {
    this.queryForm = this.fb.group({
      username: [value: ''],
      email: [value: '', filterMode:'contains'],
    });
  }

您的用户名实际在哪里：

export class SomeType {
   username:string,
   filterMode:string
}

因此，基本上，您表单的username 字段变为复杂类型SomeType。

【讨论】：

【解决方案3】：

您不需要扩展 FormGroup 类。您可以从@angular/forms 创建实现ControlValueAccessor 类的自定义组件

如果你这样做，你可以使用响应式表单来处理数据模型，就像普通输入一样

@Component({
    selector: 'custom-comp',
    templateUrl: './custom.component.html',
    styleUrls: ['./custom.component.scss'],
    providers: [{
        provide: NG_VALUE_ACCESSOR,
        useExisting: forwardRef(() => CustomComponent),
        multi: true
    }]
})
export class CustomComponent implements ControlValueAccessor {
  onChange = (_: any[]) => {};
  constructor() {};
  /** Registers the onChange event. (used to implement the form control) */
    registerOnChange(fn): void {
        this.onChange = fn;
    }

    /** Register the onTouched event. (used to implement the form control) */
    registerOnTouched() { };
}

如果您遵循这种方法，您将能够将您想要的自定义输入和配置传递给该组件

【讨论】：