如何在表單中使用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自定義控件？

回答

相關問題