Angular14:如何使用ContentChild查询表单组件

Question

假设我想将任何表单组件放到包装表单字段组件中。如何查询任何可以使用formControl指令的表单组件。

包装器组件将像这样使用。

@Component({
  selector: 'form-field',
  template: `
    <label >{{label}}</label>
    <ng-content></ng-content>
    <div class="error-message">{{error}}</div>

  `,
  styles: [],
})
export class FormFieldComponent {

  @ContentChild(IDontKnowWhatToPutHere) formComponent: IDontKnowWhatToPutHere 

  @Input() label!: string;

  error: string = "";

  constructor() {}

  ngAfterContentInit() {
    this.listenToErrorsAndSetError(this.formComponent.control)
  }
}

然后，这个组件可以像这样使用。

...
<form-field label="myLabel">
  <input formControlName="myControlName">
</form-field>
<form-field label="myLabel2">
  <custom-multiselect formControlName="myControlName2"></custom-multiselect>
</form-field>
...

这样的事有可能吗？

Answer 1

可以通过NgControl指令选择所有表单元素。但是ContentChild装饰器只会选择第一个元素。使用ContentChildren访问所有这些文件。

示例：

@ContentChild(NgControl) formComponent: NgControl