Angular 2 Reactive Forms Kontrollkästchen - Bind Bool zu Nummer

Question

Ich habe ein Formularmodell mit einigen Indikatoren, die als Kontrollkästchen dargestellt werden. Gegenwärtig modellieren sie ihren Wert als wahr/falsch im Formobjekt json. Was ich möchte ist, dass ihr Wert von einer booleschen Zahl in eine Zahl von jeweils 1/0 konvertiert wird. Gibt es einen klugen Weg, dies zu tun?

Beispielcode:

@Component 

template: ` 
    <form [formGroup]="myForm" (ngSubmit)="save(myForm.value)"> 
     <input type="checkbox" id="myToggle" formControlName="myToggle"/> 
    </form> 
` 
export class MyComponent implementes OnInit{ 
private myForm:FormGroup; 
myToggle: number; 

constructor(private _fb:FormBuilder) {} 

ngOnInit() { 
    this.myForm = this._fb.group({ 
     myToggle: [0] 
    }); 
} 

Hoffentlich wird die oben demonstriert, dass ich versuche, die Art von „myToggle“ auf eine Zahl zu setzen. Beim Initialisieren des Formulars wird der Standardwert auf 0 gesetzt, und das Kontrollkästchen wird nicht aktiviert. Wenn Sie das Kontrollkästchen jedoch auf checked setzen, wird der Formularwert auf true statt auf 1 gesetzt. Ich möchte, dass er auf 1 aktualisiert wird. Über this question sehe ich, dass es einige Optionen gibt, booleans in Zahlen zu konvertieren. Ich bin mir jedoch nicht sicher, wie ich das mit dem reaktiven Formularmodell umsetzen soll.

Answer 1

FormControl hat registerOnChange Methode, mit der Sie einen Rückruf nach jeder Änderung ausgeführt angeben können.

Mit Ihrem Beispiel können Sie auf Steuerelement let ctrl = this.myForm.controls["myToggle"] (ich würde es lieber manuell erstellen) und dann können Sie tun, wie ctrl.registerOnChange(() => ctrl.patchValue(ctrl.value ? 1 : 0));.