Bedingte ngModel Datenbindung

Ich habe ein problem mit bedingter Datenbindung ngModel in Angular4.

Erklären:

Habe ich ein kleines Formular:

<form-question-radio
  [(ngModel)]="model['q4']"
  name="question"
  [options]="[{value:true, label:'Yes'}, {value:false,label:'No'}]"
  required>
      Do you want?
</form-question-radio>

<ng-container *ngIf="model['q4'] == true">
  <form-question-radio
    [(ngModel)]="model['q4_1']"
    name="question4_1"
    [options]="[
      {value:1,label:'Freedom'},
      {value:2,label:'Peace'},
      {value:3,label:'Money'}
    ]" required>
      What do you want?
  </form-question-radio>
</ng-container>

form-Frage-radio ist meine benutzerdefinierte form-control (implementiert ControlValueAccessor)

Ich würde gerne weitergeben Wert Modell[‚q4_1‘] nur, wenn die Antwort für die erste Frage hat wahr Wert. Wenn die Antwort für die erste Frage (Modell[‚F4‘]) hat false, Modell[‚q4_1‘] wäre null.

Das problem beginnt, wenn ich prüfen, wahre Antwort für die erste Frage, danach, einige Antwort für die zweite Frage, die ich nicht überprüfen (mal wieder) falsche Antwort für die erste Frage. Ich möchte die Modell[‚q4_1‘] Wert gleich null, ist es aber nicht.


Ich versuchte mit der bedingten Bindung wie:

[(ngModel)]="model['q4'] == true ? model['q4_1'] : null"

aber es verursacht Fehler.


Ich versuche

[(ngModel)]="model['q4'] && model['q4_1']"

zu. Aber es funktioniert immer noch nicht, da gibt boolean, denke ich. Ist es?


Frage:
Gibt es eine Möglichkeit, bedingte Datenbindung ngModel? Wie sollte es Aussehen?

 

One Reply
  1. 2

    Erste Lösung:

    Verwenden ngModelChange. Es ist ein Ereignis, das standardmäßig immer schreibt neuen Wert in das Modell, wenn der Eingang Wert ändert, aber es kann überschrieben werden. Es wird automatisch emittiert für jede Komponente, die verwendet ngModel, so dass Sie nicht haben sorgen zu machen.

    In der Vorlage:

    <form-question-radio
      [ngModel]="model['q4_1']"
      (ngModelChange)="questionQ4Change($event)">
    </form-question-radio>
    <form-question-radio
      [ngModel]="model['q4_1']"
      (ngModelChange)="questionQ41Change($event)">
    </form-question-radio>
    

    Controller:

    questionQ4Change(newValue) {
      this.model['q4'] = newValue;
      if (!newValue) {
        this.model['q4_1'] = null;
      }
    }
    questionQ41Change(newValue) {
      this.model['q4_1'] = this.model['q4'] ? newValue : null;
    }
    

    Zweite Lösung:

    Können Sie auch Getter und setter für q4 und q_1.

    In der Vorlage:

    <form-question-radio
      [(ngModel)]="model['q4_1']"
    </form-question-radio>
    <form-question-radio
      [(ngModel)]="model['q4_1']"
    </form-question-radio>
    

    Controller:

    model = {
      q_4_value: null,
      q4_1_value: null,
    
      get q_4() { 
        return this.q_4_value;
      },
      get q4_1() {
        return this.q4_1;
      },
    
      set q_4(newValue) { 
        this.q_4_value = newValue;
        if (!newValue) {
          this.q4_1_value = null;
        }
      },
      set q4_1(newValue) {
        this.q4_1_value = this.q_4 ? newValue : null;
      },
    }
    
    • es ist keine Lösung für mich. Es ist immer noch ändern wenn ich Sie ändern q4_1, aber ich habe zu ändern q4_1 Wert, wenn q4 false/true. Ich kann verstehen, wie Ihre Lösung funktioniert, aber ich bin auf der Suche nach generische Lösung, wenn du weißt, was ich meine
    • Okay, dann kann man ein anderes questionQ4Change event, und in diesem Fall können Sie sowohl q4 neuer Wert und, falls erforderlich, ändern Sie q4_1 Wert.
    • Ich fügte hinzu, eine andere Lösung mit setter, obwohl ich denke, es ist komplizierter.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.