Wie erhalten Sie einen einzigartigen Wert in FormArray reaktive Form in Angular?

Question

Ich habe eine Stackblitz-App erstellt, um meine Frage hier zu veranschaulichen: https://angular-ry1vc1.stackblitz.io/

Ich habe FormArray-Werte in einer HTML-Auswahlliste. Wenn ein Benutzer die Auswahl ändert, sollte er den ausgewählten Wert auf der Seite anzeigen. Das Problem ist, wie kann ich nur die aktuelle Auswahl anzeigen und es sollte NICHT überschreiben den zuvor ausgewählten Wert. Ich frage mich, wie man den key benutzt, um den Platzhalter der Werte einzigartig zu machen.

TIA

form.html

<form [formGroup]="heroForm" novalidate class="form"> 
    <section formArrayName="league" class="col-md-12"> 
    <h3>Heroes</h3> 
    <div class="form-inline" *ngFor="let h of heroForm.controls.league.controls; let i = index" [formGroupName]="i"> 
     <label>Name</label> 
     <select (change)="onSelectingHero($event.target.value)"> 
     <option *ngFor="let hero of heroes" [value]="hero.id" class="form-control">{{hero.name}}</option> 
     </select> <hr /> 
     <div> 
     Hero detail: {{selectedHero.name}} 
     </div> <hr /> 
    </div> 
    <button (click)="addMoreHeroes()" class="btn btn-sm btn-primary">Add more heroes</button> 
    </section> 
</form> 

component.ts

import { Component, OnInit } from '@angular/core'; 
import { FormArray, FormBuilder, FormControl, FormGroup, Validators, NgForm } from '@angular/forms'; 

@Component({ 
    selector: 'my-app', 
    templateUrl: './app.component.html', 
    styleUrls: [ './app.component.css' ] 
}) 
export class AppComponent implements OnInit { 
    heroes = []; 
    heroForm: FormGroup; 
    selectedHero; 

    constructor(
    private fb: FormBuilder, 
) { 
    this.heroForm = fb.group({ 
     league: fb.array([ 
     this.loadHeroes(), 
     this.loadHeroes(), 
     this.loadHeroes() 
     ]) 
    }); 
    } 

    ngOnInit() { 
    this.listHeroes(); 
    } 

    public addMoreHeroes() { 
    const control = this.heroForm.get('league') as FormArray; 
    control.push(this.loadHeroes()); 
    } 

    public loadHeroes() { 
    return this.fb.group(
     { 
     id: this.heroes[0], 
     name: '', 
     level: '', 
     skill: '', 
     } 
    ); 
    } 

    public listHeroes() { 
    this.heroes = [ 
     { 
     id: 1, 
     name: 'Superman' 
     }, 
     { 
     id: 2, 
     name: 'Batman' 
     }, 
     { 
     id: 3, 
     name: 'Aquaman' 
     }, 
     { 
     id: 4, 
     name: 'Wonderwoman' 
     }  
    ]; 
    } 

    public onSelectingHero(heroId) { 
    this.heroes.forEach((hero) => { 
     if(hero.id === +heroId) { 
     this.selectedHero = hero; 
     } 
    }); 
    } 
} 

Answer 1

Wenn das Ziel, das nur das ausgewählte Held von Array-Element zu zeigen, statt ersetzen alle ausgewählten Werte dann können Sie etwas Hilfe mit die Array-Formularelemente.

A. Die onSeletingHeroselectedHero und nicht notwendig sind, ersetzt, die die Form I Wert durch formControlName Attribut, in diesem Beispiel die Steuerung der idselect ist. Die h.value.id ist die Möglichkeit, die ausgewählte Wert-ID zu erhalten. Ich die ausgewählten Helden zu bekommen hinzugefügt, um eine getHeroById Methode

<select formControlName="id"> 
     <option *ngFor="let hero of heroes;" [value]="hero.id" class="form-control">{{hero.name}}</option> 
     </select> <hr /> 
     <div> 
     Hero detail: {{getHeroById(h.value.id).name}} 
     </div> <hr /> 
    </div> 

B. Um.

getHeroById(id: number) { 
    return id ? this.heroes.find(x => x.id === +id) : {id: 0, name: ''}; 
    } 

Hoffe, diese Informationen lösen Ihre Frage. Prost