使用 Angular 组件作为表单控件答案

【问题标题】：Using an Angular component as form control使用 Angular 组件作为表单控件
【发布时间】：2021-01-15 10:22:20
【问题描述】：

考虑以下形式

   <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 组成。使用简单的复选框一切正常，但使用自定义组件时出现以下错误：

错误：表单控件没有值访问器，名称为：'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。我该如何指定？

【问题讨论】：

标签： angular angular-forms

【解决方案1】：

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

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

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

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

【讨论】：

正是我需要的原因！效果很好:) 谢谢。

【解决方案2】：

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

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

为您的组件

【讨论】：

对不起，我不确定我明白你的意思。