如何在表单中使用ngModel自定义控件？

我创建了一个用于处理选择框的组件，现在当我在提交表单后将它放在表单标记中时，选择的结果并未显示在控制台中。如何在表单中使用ngModel自定义控件？

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

testOption：是我通过的对象数组抛出与@Input的选择框。

这里是选择框组件：

<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>

在HTML

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); 
    } 

}

用法

控制台日志：（没有选择框的值）

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

来源

2017-01-30 Sajad

你讨论'testOption'和'testObject '。什么是正确的名字？ :)先检查一下.. – mxii

@mxii正确的名字是testOption。我的坏:) – Sajad

请显示您的“父母”组件。（模板） – mxii

我想我现在得到了你的问题。

您想要在您的自定义组件上实现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>

来源

2017-01-30 12:17:14 mxii

谢谢你的回答。我还有一个问题，我怎样才能在另一个组件中调用'registerOnChange'函数？ – Sajad

你为什么要这样做？ :)你想实现什么？ – mxii

我想要检测具有不同组件和不同对象的选择框的更改。基本上我想用'registerOnChange'函数。 – Sajad

尝试[value]="option.value"，顺便说一句，你可以展示你的控制台太

来源

2017-01-30 10:48:04

也不起作用。 – Sajad

你必须绑定ngModel在您选择的属性之一。然后在控制台中打印ngModel值。

来源

2017-01-30 11:30:57 Muthupriya

在组件选择器上绑定ngModel之后出现此错误：'EXCEPTION：Uncaught（在promise中）：错误：没有值名称为'select2''的窗体控件的值存取器 – Sajad

您必须在选择器中包含窗体。从'@ angular/forms'导入{FormGroup}。 – Muthupriya

如何在表单中使用ngModel自定义控件？

回答

相关问题