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

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？

- user2531854

---

听起来你想要一个自定义验证器？ - Chrillewoodz

@Chrillewoodz 不是自定义验证器，而是当我获取 FormGroup -> controls 对象时可以看到的自定义属性。我想能够访问用户名控件并查看它是否具有包含过滤模式。 - user2531854

据我所知，您可以为此用例创建一个验证器。然后，您可以将您的参数提供给验证器，并根据您提供的内容更新有效性。 - Chrillewoodz

如果我不想验证字段，只是想添加一个可以在表单组上访问的属性，使用验证器属性是否有意义？ - user2531854

这就是为什么我不想创建一个验证器。我只想在我的表单构建器中设置一个属性，叫做filterMode。然后我可以将我的表单传递到某个地方，以便基于该属性构建查询。 - user2531854

Answer 1

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

只需使用以下代码：

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

}

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

Here is a working example.

- user4676340

Answer 2

你需要创建一个带有值访问器的组件。

Ref:https://angular.io/api/forms/ControlValueAccessor

这个想法是你可以构建组件，实现值访问器和接口方法，然后你可以将该组件用作复杂的formgroup元素..就像这样:

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

你的用户名实际上应该是：

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

基本上，你表单中的username字段将变成复杂类型SomeType。

- dee zg

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

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

- Ricardo