使用表单构建器的自定义表单控件

Question

有没有办法使用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？

Answer 1

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

参考：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。

Answer 2

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

只需这个。

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

}

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

Here is a working example。

Answer 3

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

如果你这样做，将允许你使用反应形式来处理数据模型，就像正常输入一样

@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() { };
}

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