Formbuilder setvalue() ne fonctionne pas comme prévu lorsqu'il est utilisé dans les menus déroulants

Question

Le constructeur de formulaire angulaire 2,4 setvalue() ne fonctionne pas comme prévu lorsqu'il est utilisé dans des menus déroulants.

J'ai la liste déroulante suivante, sélectionnez qui obtient peuplé avec les organisations Github:

<select name="org" formControlName="organizations"> 
    <option *ngFor="let org of organizations" [ngValue]="org">{{org.organization.login}}</option> 
    </select> 

Voici le code javascript qui définit l'organisation Github qui doit être sélectionné.

this.pipelineForm = fb.group({ 
     name:'', 
     organizations:'', 
     repos: '', 
     branches:'', 
     runtime:'', 
     versions:'' 
    }); 

    userService.getOrganizations().subscribe((org:github)=>{ 
    let organizationName = org.data[0]; 
    this.organizations = org.data; 
     this.projects.subscribe((p)=> { 
     p[1].project.subscribe((f)=>{ 

     this.pipelineForm.get("organizations").setValue(f.organizations, {onlySelf: true}); 

      //this.pipelineForm.patchValue(f); 
     }); 
     }); 

    }); 

j'attends l'option correspondante déroulant à sélectionner lorsque je passe la valeur à la setValue(). Au lieu de cela, je reçois une option vide. J'ai également essayé avec patchValue(). Pas de chance.

Answer 1

Utilisez l'attribut compareWith sur votre tag select:

<select ... [compareWith]="compareByName"> 

Ensuite, mettre en œuvre une fonction simple dans votre composant

compareByName(org1: Org, org2: Org): boolean { 
    return org1 && org2 ? org1.name === org2.name : org1 === org2; 
} 

Answer 2

Un petit exemple, nous voulons enregistrer un numéro. voir [ngValue] = "org.id" et this.myForm.controls ['organization']. setValue (valeur);

import { Component, OnInit } from '@angular/core'; 
import { FormBuilder, FormControl, FormGroup } from '@angular/forms'; 
interface Iorganization { 
    id: number; 
    name: string; 
} 
@Component({ 
    selector: 'app-select', 
    template: ` 
    <form [formGroup]="myForm" novalidate> 
    <select name="org" formControlName="organization"> 
     <option *ngFor="let org of organizations" [ngValue]="org.id">{{org.name}}</option> 
    </select> 
    </form> 
    <button (click)="setOrg(1)">Org 1</button> 
    <button (click)="setOrg(2)">Org 2</button> 
    {{myForm.value |json}} 
    `, 
    styleUrls: ['./select.component.css'] 
}) 
export class SelectComponent implements OnInit { 
    organizations: Iorganization[]; 
    myForm: FormGroup; 
    constructor(private fb: FormBuilder) { } 
    ngOnInit() { 
    this.organizations = [ 
     { id: 1, name: "org 1" }, 
     { id: 2, name: "org 2" }, 
     { id: 3, name: "org 3" }, 
     { id: 4, name: "org 4" } 
    ]; 
    this.myForm = this.fb.group({ 
     organization: 1 
    }) 
    } 
    setOrg(value: number) { 
    this.myForm.controls['organization'].setValue(value); 
    } 
} 

si nous voulons sauver un -voir objet {{myForm.value | JSON}} - nous avons besoin de faire quelques changements. voyons que nous mettons [ngValue] = "org", mais la fonction setOrg() utilise un objet pour faire setValue. Et non, ce n'est pas valide setValue ({id: 1, nom: 'org1'})

import { Component, OnInit } from '@angular/core'; 
.... 
template: ` 
<form [formGroup]="myForm" novalidate> 
    <select name="org" formControlName="organization"> 
     <option *ngFor="let org of organizations" [ngValue]="org">{{org.name}}</option> 
    </select> 
    ....` 
export class SelectComponent implements OnInit { 
    ... 
ngOnInit() { 
    this.organizations = [ 
    { id: 1, name: "org 1" }, 
     .... 
    ]; 
    this.myForm = this.fb.group({ 
     organization: null 
    }) 
} 
setOrg(value: number) { 
    let organization=this.organizations.find(o=>o.id==value); 
    this.myForm.controls['organization'].setValue(organization); 
}