angular – 如何在表单中使用带有自定义控件的ngModel？

发布时间：2020-12-17 17:42:37 所属栏目：安全来源：网络整理

导读：我创建了一个用于处理选择框的组件,现在当我在提交表单后将其放在表单标签中时,选择的结果不会显示在控制台中. 我的代码有什么问题？我怎样才能解决这个问题？ testOption：是我传递的对象数组,使用@Input抛出选择框. 这是选择框组件： import { Component,O

我创建了一个用于处理选择框的组件,现在当我在提交表单后将其放在表单标签中时,选择的结果不会显示在控制台中.

我的代码有什么问题？我怎样才能解决这个问题？

> testOption：是我传递的对象数组,使用@Input抛出选择框.

这是选择框组件：

import { Component,OnInit,Input } from '@angular/core';

@Component({
    selector: 'input-select',template:`
      <div class="field-select">
        <span><icon name="select-arrow" size="10"></icon></span>
        <select name="{{name}}" class="field">
          <option value="0" disabled selected>{{label}}</option>
          <option *ngFor="let option of options" [ngValue]="option.value">{{option.name}}</option>
        </select>
      </div>
    `
})
export class InputSelectComponent implements OnInit {
    @Input() label: string;
    @Input() name: string;
    @Input() options;


    // testOptions = [
    //   {value:'test',name:'test2'},//   {value:'test',name:'test2'}
    // ];

    constructor() { }

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

}

在html中的用法：

<input-select label="test" name="select2" [options]="testOption"></input-select>

表格html：

<form role="form" class="form" #f="ngForm" (ngSubmit)="onSubmit(f)">
    <input class="field" name="name" ngModel type="text" placeholder="n1">
    <input-select label="b2" name="select2" [options]="testObject"></input-select>
    <input class="field" name="building-type" type="text" ngModel placeholder="b3">
</form>

控制台日志:(没有选择框值)

Object {name: "test",building-type: "tset" }

解决方法

我想我现在遇到了你的问题.

您想在自定义组件上实现ControlValueAccessor,以便在具有ngModel的表单中使用它！？

您的组件应如下所示：

@Component({
   selector: 'ng2-input-select',template: `
      <div class="field-select">
        <select name="{{ name }}" class="field" [(ngModel)]="value" (ngModelChange)="_onChange($event)">
          <option value="" disabled selected>{{ label }}</option>
          <option *ngFor="let option of options" [value]="option.value">{{ option.name }}</option>
        </select>
      </div>
   `,providers: [
      { /* idk why or what this will do exactly.. but it works! ;) */
         provide: NG_VALUE_ACCESSOR,useExisting: forwardRef(() => SelectBoxComponent),multi: true
      }
   ]
})
export class SelectBoxComponent implements OnInit,ControlValueAccessor {
  @Input() label: string;
  @Input() name: string;
  @Input() options;
  @Input() value: string = '';

  // ControlValueAccessor implementation
  // ====================================

  // call if value was changed inside our component
  private _onChange = (_: any) => { };
  // call if input was "touched" .. !
  private _onTouched = () => { };

  // incoming change..
  public writeValue(val: any) {
    this.value = val;
  }

  public registerOnChange(fn: (_: any) => void): void { this._onChange = fn; }
  public registerOnTouched(fn: () => void): void { this._onTouched = fn; }
}

现场演示：https://plnkr.co/edit/imCJmCoJaeGQiUMcyBwz?p=preview

UPDATE

在表单组件中使用更改检测：

<ng2-input-select ngModel (ngModelChange)="selectBoxChanged($event)" label="b2" name="select2" [options]="testObject"></ng2-input-select>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!