Optionsfelder in Angular2 Modellgesteuerte Formulare funktionieren nicht wie erwartet

Question

Wenn ich Optionsfelder in meinem modellgesteuerten Formular erstelle, funktionieren sie einwandfrei, aber sie haben nicht die Optionsschaltfläche ausgewählt, die durch den Standardwert von formControlName widergespiegelt wird. Zum Beispiel:

<input type="radio" formControlName="isPublic" name="isPublic" value="false" id="keepPrivate" ><label for="keepPrivate">Keep it Private</label> 
<input type="radio" formControlName="isPublic" name="isPublic" value="true" id="makePublic" ><label for="makePublic">Make it Public</label> 
{{form.value.isPublic}} 

Wenn ich das es funktioniert richtig, aber ich kann der Wert von form.value.isPublic falsch ist (als Ausgabe in der letzten Zeile zu bestätigen) und noch kein Optionsfeld ist standardmäßig ausgewählt sehen.

Ich habe versucht, dies zu korrigieren, indem ich jeweils [checked] hinzufüge, um den Standardwert zu fahren. Dies funktioniert beim Laden der Seite, indem die Standardeinstellungen in den Optionsschaltflächen korrekt ausgewählt werden. Es funktioniert sogar für eine Auswahl - in dem ich den anderen Radioknopf auswählen kann, es wird ausgewählt, der erste wird nicht ausgewählt, und der {{form.value.isPublic}} wird von false zu true wechseln.

<input type="radio" formControlName="isPublic" [checked]="!form.value.isPublic" name="isPublic" value="false" id="keepPrivate" ><label for="keepPrivate">Keep it Private</label> 
<input type="radio" formControlName="isPublic" [checked]="form.value.isPublic" name="isPublic" value="true" id="makePublic" ><label for="makePublic">Make it Public</label> 
{{form.value.isPublic}} 

Das Problem kommt, wenn ich das erste Optionsfeld wieder wählen - auf dem ersten Klick auf das Optionsfeld Auswahlzustand gar nicht ändern, aber die {{form.value.isPublic}} Ausgabe Änderungen zurück auf false gesetzt. Wenn ich erneut darauf klicke, ändert sich der Auswahlzustand für den Radio-Button. Es dauert also zwei Klicks, um es auf den Standard zurück zu schalten. Wenn ich danach wieder auf den anderen klicke, ändert sich das wie erwartet, aber das Zurückschalten auf das erste dauert zwei Klicks (ein Klick aktualisiert den Formularwert und der zweite Klick ändert den Auswahlstatus des Optionsfelds).

Was sollte ich in dieser Situation tun, damit die Optionsfelder korrekt funktionieren und den Standardwert für das Formular wiedergeben?

Answer 1

Ich kann nicht erklären, zwei Klicks benötigt, aber dies sollte funktionieren:

<label> 
    <input type="radio" formControlName="isPublic" value="true" id="isPublic" (change)="form.value.isPublic = true"/> Make it public 
</label> 
<label> 
    <input type="radio" formControlName="isPublic" value="false" id="isPublic" (change)="form.value.isPublic = false"/> Keep it private 
</label> 

Auf meinem Projekt, das wir über die Radiobuttons dynamisch basierend generieren am Beispiel ‚Fragen‘ in der Dokumentation für Angular 2 Dynamic Forms

<label class="radio-inline" *ngFor="let opt of input.options"> 
    <input type="radio" [formControlName]="input.key" [value]="opt.value" [id]="input.key" (change)="input.value = opt.value"> 
    {{opt.label}} 
</label> 

Answer 2

Nach dem Experimentieren mit Werten aus dem Formularobjekt, um andere Angular2-Anweisungen (wie *ngIf) zu fahren, entdeckte ich, dass das Verhalten immer ein wenig seltsam ist. Wenn ich z. B. Teile der Seite mit *ngIf basierend auf dem Wert form.value.isProfilePublic zeichne, würde sich der Abschnitt *ngIf nur einmal ändern, obwohl sich der Wert dieser Variablen ändern kann. Es ist nicht wichtig für die Antwort, so werde ich nicht näher ausführen, aber unter dem Strich ist, dass die Verwendung von Formularwerten, um dynamisch Dinge zu fahren, die den Formularwert selbst aktualisieren kann nicht funktionieren, wie ich es erwarten würde (wahrscheinlich aus einem guten Grund).

... also jetzt verwende ich eine andere Variable nicht mit dem Formular verwandt, um die Standardauswahl zu fahren, und es funktioniert gut. Also, die folgenden Werke:

<input type="radio" formControlName="isProfilePublic" name="isProfilePublic" [checked]="!currentUser.isProfilePublic" value="false" id="keepPrivate" ><label for="keepPrivate">Keep it Private</label> 
<input type="radio" formControlName="isProfilePublic" name="isProfilePublic" [checked]="currentUser.isProfilePublic" value="true" id="makePublic" ><label for="makePublic">Make it Public</label>