Angular2 - Anfangswert in wählen - Reaktive Formen

Question

Ich habe ein Problem mit der Einstellung der Standardoption in auswählen. Ich bekomme Array vom Server und ich möchte das zweite Element im Array auswählen, das ist DocumentTypes [1]. Hier ist mein Code und was ich versucht habe.

Wählen Sie HTML

<select formControlName="type"> 
    <option *ngFor="let document of documentTypes" [ngValue]="document" [attr.selected]="selectedType">{{document.name | translate}}</option> 
</select> 

Werte vom Server

getDocumentTypes() { 
    this._api.send(urlValues.documentType, 'Get').subscribe(
     res => { 
      this.selectedType = res.content.types[1]; 
      this.documentTypes = res.content.types; 
     }, 
     err => console.log(err) 
    ); 
} 

Ich habe auch Dokument Methode bauen, und ich versuchte, diese

buildDocument(document?: any) { 
    if (document) { 
     this.documentForm = this._fb.group({ 
      customer: this._fb.group({ 
       oib: document.customer.oib, 
       location: document.customer.location 
      }), 
      payment_method: document.payment_method, 
      delivery_method: document.delivery_method, 
      status: document.status, 
      type: document.type, 
      expiration_date: document.expiration_date, 
      delivery_date: document.delivery_date, 
      note: document.note 
     }); 
    } else { 
     this.documentForm = this._fb.group({ 
      customer: this._fb.group({ 
       oib: null, 
       location: null 
      }), 
      payment_method: null, 
      delivery_method: null, 
      status: null, 
      type: this.documentTypes[1], 
      expiration_date: '', 
      delivery_date: '', 
      note: '' 
     }); 
    } 
} 

Haben Sie andere Lösungen? Dank

Answer 1

Nutzen Sie die Formcontrol statt [attr.selected] haben. Vielleicht müssen Sie auch z. B. patchValue verwenden, da die Daten async sind und den vorausgewählten Wert nach dem Abrufen der Daten festlegen, sodass Ihre App beim Erstellen des Formulars keine Fehlermeldung ausgibt, wenn keine Daten vorhanden sind.

Also Ihr wählen wie folgt aussehen würde:

<select name="document" formControlName="type"> 
    <option *ngFor="let doc of documentTypes" [value]="doc.name"> 
     {{doc.name}} 
    </option> 
</select> 

Und wenn Sie Daten aus der API erhalten haben, können Sie patchValue:

this.documentForm 
    .patchValue({ 
     type: this.documentTypes[1].name 
    }) 

hier ein demo plunker, wo Set Value Knopf Art simuliert, dass Daten async kommen, nur um die patchValue zu präsentieren :)

PS:

Sie ngValue verwenden können, wenn Sie das gesamte Objekt binden müssen, aber das bedeutet auch, dass das Formular Wert das ganze Objekt, ähnlich wie diese enthalten:

{ 
    "type": { 
    "id": 2, 
    "name": "Doc 2" 
    } 
} 

und vielleicht das ist nicht das, was Sie wollen, so dass ich nur mit den name hier, so dass Ihre Form Wert wie folgt aussieht:

{ 
    "type": "Doc 3" 
} 

Answer 2

Versuchen Sie folgendes:

getDocumentTypes() { 
    this._api.send(urlValues.documentType, 'Get').subscribe(
     res => { 
      this.selectedType = res.content.types[1]; 
      this.documentTypes = res.content.types; 
      this. documentForm.patchValue({'type': res.content.types[1]}, {onlySelf: true}) //Add this line 
     }, 
     err => console.log(err) 
    ); 

}