使用 Angular 组件作为表单控件

Question

考虑以下形式

   <div [formGroup]="form">

        <div [ngSwitch]="control.controlType">

            <div *ngSwitchCase="'checkbox'">
                <label [attr.for]="control.key">{{control.label}}</label>
                <input [formControlName]="control.key" [id]="control.key" type="checkbox"
                    (change)="evaluate(control.key)">
            </div>

            <app-multiple-checkbox [formControlName]="control.key"  *ngSwitchCase="'multipleCheckbox'"
                [options]="control.options" (change)="evaluate(control.key)">
            </app-multiple-checkbox>
        </div>

    </div>

我的表单是动态构建的。它由 checkboxesa 和自定义组件 multiple-checkbox 组成。使用简单的复选框一切正常，但使用自定义组件时出现以下错误：

Error: No value accessor for form control with name: 'content-type'

'content-type' 是 control.key 传递到我的自定义组件的 formControlName 属性的值。

MultipleCheckboxComponent.ts

@Component({
  selector: 'app-multiple-checkbox',
  templateUrl: './multiple-checkbox.component.html',
  styleUrls: ['./multiple-checkbox.component.scss']
})
export class MultipleCheckboxComponent implements OnInit {

  constructor() { }

  @Input() public options: { key, value }[];
  @Output() haschanged = new EventEmitter();


  ngOnInit(): void {
    console.log(this.options);
  }

  evaluate(key): void {
    this.haschanged.emit(key, this.options);
  }
}

MultipleCheckboxComponent.html

<div *ngFor="let option of options">
     <label [attr.for]="option.key">{{option.value}}</label>
      <input [id]="option.key" type="checkbox" (change)="evaluate(control.key)">
 </div>

我知道我在这里遗漏了一些使它成为表单组件的东西，但我不知道是什么。特别是，此自定义表单控件的值应该是所选复选框的 ID。我该如何指定？

Answer 1

我不确定但是我相信你应该定义和初始化属性

控制：{controlType:whateverType, ...}

对于你的组件

Answer 2

您需要为您的组件提供 NG_VALUE_ACCESSOR DI 令牌：

@Component({
  selector: "hello",
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => HelloComponent),
      multi: true
    }
  ]
})

并实现ControlValueAccessor接口。然后 Angular 表单 API 会将您的组件视为功能表单控件。

Here 是 HelloComopnent 的示例代码，它是一个自定义表单控件。

使用 Angular 组件作为表单控件

Using an Angular component as form control

angular

angular-forms