Question

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

例如：

FormGroup

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

Answer 1

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

价：https://angular.io/api/forms/ControlValueAccessor

这个想法是你构建组件，实现价值访问器和＆amp;接口方法，然后您可以将该组件用作复杂的表单组元素。如：

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

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

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

3 个答案: