Ich arbeite an zwei Problemen auf einmal. Zum Glück habe ich sie eingegrenzt, so dass ich wahrscheinlich in einer Frage nach einem PLNKR-Beispiel fragen kann.Wie setze ich den select-Element-Wert eines dynamisch erstellten Formulars in angular2
Hier ist der plnkr Code arbeite ich an: http://plnkr.co/edit/qv1BX7WtpYhw5B92SuoC?p=preview
Was ist das? Es zeigt zwei Karten, die obere Karte ist ein Beispiel für die Verwendung von Dynamic Chips.
Was ist los damit? Nachdem der zweite Chip entfernt wurde, erscheinen die Informationen dieses Chips in der Auswahlbox.
Was passiert? Wenn ich auf die Konsolenausgabe schaue, habe ich den Auswahlwert protokolliert (<FormArray>this.updateProfileForm.controls["personNames"].value). Was es zeigt, ist, dass wenn die erste Auswahl getroffen wird, der Wert leer ist. Wenn ein Wert zum zweiten Mal ausgewählt wird, wird der Wert zur ersten Auswahl.
Nach dem Entfernen eines Chips sehen wir, dass der Wert immer noch der zuvor ausgewählte Wert ist.
Was versuche ich zu tun? Ich versuche, den Wert der Auswahl auf leer zu setzen. Und ich habe den Weg zur Einstellung des Wertes nicht gefunden oder gefunden. Wenn ich <FormArray>this.updateProfileForm.controls["personNames"].value = ''; versuche, sagt es mir, dass dies mit einer Eigenschaft, die nur einen Getter hat, nicht möglich ist.
Was ist die richtige Methode, die ich verwenden sollte, um den Wert auf leer zu setzen?
- Codeblock -
<!-- app.component.html -->
<form [formGroup]="updateProfileForm" novalidate (ngSubmit)="save(myForm)">
<div id="names">
<md-card>
<md-toolbar color="primary">Dynamic Chips</md-toolbar>
<md-card-content>
<md-chip-list>
<md-chip *ngFor="let person of people" (click)="removePerson($event)">{{person.name}} [X]</md-chip>
<md-select id="names"
placeholder="Names"
formControlName="personNames"
(ngModelChange)="addPerson($event)">
<md-option *ngFor="let name of names" value="{{name.code}}">
{{ name.name }}
</md-option>
<md-option disabled></md-option>
</md-select>
</md-chip-list>
</md-card-content>
</md-card>
</div>
</form>
-
// app.component.ts
updateProfileForm: FormGroup;
names = [
{code: "F", name: "Frank"},
{code: "G", name: "George"},
{code: "H", name: "Henry"},
{code: "I", name: "Inigo"},
{code: "J", name: "Jose"},
{code: "K", name: "Kevin"}
];
removedNames = [];
people: Person[] = [];
constructor(private formBuilder: FormBuilder) {
this.updateProfileForm = this.formBuilder.group({
personNames: ['', []]
});
}
addPerson(selection): void {
let selected = this.names.find(el => el.code === selection);
this.people.push({name: selected.name});
this.removedNames.push(selected);
this.names.splice(this.names.findIndex(el => el === selected), 1);
const control = <FormArray>this.updateProfileForm.controls["personNames"]
console.log("Adding: control.value = ", control.value);
}
removePerson(chip) {
// get name and remove the extra text
let name = chip.target.innerText;
name = name.substring(0, name.lastIndexOf(' '));
// get the index of the name from the people array, then remove it from people (chips)
let index = this.people.findIndex(el => el.name === name);
this.people.splice(index, 1);
// get the custom object from the removedNames array
let removedName = this.removedNames.find(el => el.name === name)
// ... and add it back to names and sort
this.names.push(removedName);
this.names.sort(function(a, b) {
if (a.name < b.name) return -1;
if (a.name > b.name) return 1;
return 0;
});
// ... and remove it from removedNames
this.removedNames.splice(this.removedNames.findIndex(el => el.name === name), 1);
const control = <FormArray>this.updateProfileForm.controls["personNames"]
console.log("Adding: control.value = ", control.value);
}