Winkel reaktive Form - binden eine andere Eigenschaft, die nicht [Wert]

Question

Ich habe eine Winkel reaktive Form mit einem Auswahlfeld wie folgt:

<select formControlName="incomeSourceId"> 
    <option value="" disabled >Select a source</option> 
    <option *ngFor="let source of primarySourceIncome" [value]="source.value">{{source.viewValue}}</option> 
</select> 

Ich möchte Abschnitte zum Anzeigen/Verbergen auf den Dropdown-Auswahl abhängig. Bisher habe ich:

<div class="row" [hidden]="applicationForm.get('incomeSourceId').value !== '1'"></div> 
<div class="row" [hidden]="applicationForm.get('incomeSourceId').value !== '2'"></div> 

Komponente:

this.applicationForm = this.fb.group({  
    incomeSourceId: ['', [Validators.required, Validators.minLength(1), Validators.maxLength(50)]] 

}) 

Dies funktioniert jedoch ist meine Logik basierend auf dem Wert, der eine ID vom Server zurückgegeben. Ich würde es vorziehen, diese Logik zu erstellen, um gegen {{source.viewValue}} zu überprüfen, das wird sich nicht ändern. Wie kann ich eine andere Eigenschaft an das Formular <option> binden? NgModel funktioniert nicht innerhalb einer Formulargruppe.

Answer 1

<select formControlName="incomeSourceId"> 
    <option value="" disabled >Select a source</option> 
    <option *ngFor="let source of primarySourceIncome" [ngValue]="source.value">{{source.viewValue}}</option> // change to [ngValue] 
</select> 

Wenn der Wert kein String [ngValue] = "..." verwendet werden. [Wert] = "..." unterstützt nur Zeichenketten.

Answer 2

Sie den Index des aktuellen primarySourceIncome als Wert verwenden:

<option *ngFor="let source of primarySourceIncome; index as i" [value]="i">{{source.viewValue}}</option> 

Wenn das Auswahleingangswert wichtig ist für das Speichern, dann bevor Sie sparen Sie für diesen Index aussehen wollen in the primarySourceIncome und setze den Wert auf das, was er wirklich sein sollte.

Answer 3

Scheint wie ein Workaround, aber ich denke, es ist immer noch sauber.

Haben Sie ein (change) Ereignis in Ihrer Auswahl, wo wir einfach find() verwenden, um das Objekt in Ihrem Array mit dem value zu finden. So erhalten wir den entsprechenden viewValue zu diesem value. In diesem Fall, wenn Namen lang sind, wie ich sie in Variablen speichern, für eine einfachere Nutzung, so dass für Ihre Formcontrol, würde ich dies tun, nachdem Form Gebäude

this.idCtrl = this.applicationForm.get('incomeSourceId'); 

Dann wird das change Ereignis durch die select ausgelöst, wir werden nur auf eine Variable viewVal

findViewValue() { 
    this.viewVal = this.primarySourceIncome.find(x => 
    x.value == this.idCtrl.value).viewValue 
} 

die viewValue aus dem gewählten Objekt zuweisen Da Sie erwähnt, dass die viewValue nicht ändert, haben wir hier verwendet nur die Stringliterale in Vorlage. Ich habe auch [ngSwitch] hier verwendet wird, sieht sauberer ich denke :) So zum Beispiel die Vorlage könnte wie folgt aussehen:

<div [ngSwitch]="viewVal"> 
    <div *ngSwitchCase="'Employee'">Employee</div> 
    <div *ngSwitchCase="'Manager'">Manager</div> 
</div> 

auch diese wegnimmt von „unnötigen“ get Anfragen in Vorlage aufrufen.