如何在基于选择器的标签中使用 ngModel？答案

【问题标题】：how to use ngModel in selector based tag?如何在基于选择器的标签中使用 ngModel？
【发布时间】：2018-01-27 15:02:29
【问题描述】：

我是 Angular 2 的新手，我有一个包含多个文本框、复选框、标签和下拉列表的表单如果我在我的 html 中使用这个控件，那么页面会变得非常冗长。所以我想让所有控件都分开组件，然后我想根据我的主要组件 html 使用这个组件来选择器。但我的问题是，如果我使用 10 个文本框、10 个下拉菜单和多个标签，我将如何使用每个控件的值任何人都对此有所了解。

如果我将 ngmodel 用于该单独的组件，那么我如何将它用于每个控件

【问题讨论】：

我想你要找的是 ControlValueAccessor alligator.io/angular/custom-form-control

标签： angular typescript

【解决方案1】：

您可以创建自定义您自己的自定义组件

@Component({
  selector: 'my-textinput',
  template: `<div class="form-group">
                    <label><ng-content></ng-content>
                        <input [(ngModel)]="value"
                                class="form-control"
                                (blur)="onBlur()" >
                    </label>
                </div>`,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => TextInputCellEditorComponent),
      multi: true
    }
  ]
})
export class TextInputCellEditorComponent implements ControlValueAccessor, OnInit, OnDestroy {

  private value: any;

  constructor(private el: ElementRef) {
    super();
  }

  ngOnInit() {
    super.ngOnInit();
  }

  /**
   * Write value to the editor
   */
  public writeValue(value:any) {
    this.value = value;
  }

  /**
   * Register on change
   */
  public registerOnChange(fn) {

  }

  /**
   * Register on touch
   */
  public registerOnTouched(fn) {

  }

  ngOnDestroy() {

  }
}

然后你就可以在你的应用中使用这个组件了

<form>
    <my-textinput name="anyValue"
                  [(ngModel)]="anyModel">
    </my-textinput>
  </form>

【讨论】：