Wie zu verwenden ngModel mit einem benutzerdefinierten Steuerelement in einem Formular?

Erstellte ich eine Komponente für die Handhabung von select box, jetzt wenn ich es im form-tag nach der vorgelegten form das Ergebnis der Auswahl nicht zeigen, bis in der Konsole.

Was ist das problem mit meinem code? wie kann ich dieses Problem beheben?

  • testOption: ist das array-Objekt das ich übergeben, werfen Sie die select-box mit @Input.

hier ist die select-box-Komponente:

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

}

Verwendung in html:

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

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

console log: (es gibt keine select-box-Wert)

Object {name: "test", building-type: "tset" }
Sie sprechen über testOption und testObject. Was ist der richtige name? 🙂 Überprüfen Sie, dass die erste..
der richtige name ist testOption. my bad 🙂
Zeigen Sie Ihre "Eltern" - Komponente, bitte. (Vorlage)
Es meldet undefined auf der Konsole? was meinst du mit result of selection. Ich sehe nicht ein, jeden code, drucken Sie das Ergebnis auf die Konsole. 🙂
ich aktualisiert die Frage.

InformationsquelleAutor Sajad | 2017-01-30

  1. 6

    Ich glaube, ich habe Ihr problem jetzt.

    Die Sie umsetzen wollen ControlValueAccessor auf Ihrer benutzerdefinierten Komponente zu verwenden, es in eine form mit ngModel!?

    Ihre Komponente sollte so Aussehen:

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

    live-demo: https://plnkr.co/edit/imCJmCoJaeGQiUMcyBwz?p=preview

    UPDATE

    Erkennung von pegelwechseln im Formular-Komponente:

    <ng2-input-select ngModel (ngModelChange)="selectBoxChanged($event)" label="b2" name="select2" [options]="testObject"></ng2-input-select>
    Danke für die Antwort. Ich habe noch eine Frage, wie kann ich rufen Sie registerOnChange Funktion in einer anderen Komponente?
    Warum sollten Sie das tun? 🙂 Was wollen Sie erreichen?
    Ich will erkennen, ändern der select-box mit verschiedenen Komponenten und und auch mit verschiedenen Objekt. im Grunde möchte ich verwenden registerOnChange Funktion.
    Sie sollten nicht verwenden diese Funktionen.. Siehe meine aktualisierte Antwort für change-detection. Das ist genauso wie mit den anderen Formular-Eingaben mithilfe ngModel.
    Hi @mxii ich Frage mich, warum ist die controlvalueaccessor Methode verwendet statt eines anderen Typs der Komponente Kommunikation? wie Dienstleistungen oder viewchild oder ein-und Ausgänge. Können Sie erläutern, wie auf diese Frage? vielleicht sollte ich das einfach als eine Frage.

    InformationsquelleAutor mxii

  2. 0

    versuchen [value]="option.value", btw konnte Sie zeigen, dass Ihre Konsole zu

    funktioniert auch nicht.

    InformationsquelleAutor Tiep Phan

  3. 0

    Haben Sie zu binden ngModel als eines der Attribute in Ihrem Selektor an.dann drucken Sie die ngModel Wert in Ihrer Konsole.

    nach der Bindung ngModel auf component selector bekam ich diese Fehlermeldung: EXCEPTION: Uncaught (in promise): Error: No value accessor for form control with name: 'select2'
    Sie müssen, um Formulare in Ihrem Selektor an. import {FormGroup} '@eckig/Formulare'.

    InformationsquelleAutor Muthupriya

Schreibe einen Kommentar