angular - Wert aus Eingabefeld löschen

Wie kann ich den Eingabewert löschen, wenn ich das Kontrollkästchen deaktiviere?

 <mat-checkbox color="primary" formControlName="checkBox"></mat-checkbox>
 <input formControlName="input" type="text"/>

Also möchte ich einen Wert aus TypeScript löschen. Wie kann ich das tun?

Ich versuche dies :

private clearInput(): void {
    if (this.formGroup.controls.checkBox.value === false) {
      this.formGroup.controls.input.setValue(null);
    }
  }

aber das funktioniert nicht.

Antwort #1

Eine mögliche Lösung könnte die folgende sein:

• Ändern Sie Ihr HTML zu:

<mat-checkbox 
  color="primary" 
  formControlName="checkBox"
  (change)="clearInput($event, inputId)">
</mat-checkbox>
<input #inputId formControlName="input" type="text"/>

Der change-Ereignis-Emitter benachrichtigt Sie, wenn sich der Wert des Kontrollkästchens geändert hat.

Wenn sich der Wert des Kontrollkästchens ändert, wird die Methode clearInput aufgerufen.

Das erste Argument ist das Ereignis selbst, $event, das laut der Dokumentation vom Typ MatCheckboxChange ist.

Das 2º Argument ist der Verweis auf das <input>.

• Ändere die ts zu:

clearInput(checkboxChange: MatCheckboxChange, input: HTMLInputElement): void {
  if (!checkboxChange.checked) { input.value = '' }
}

Dies wird Ihr Eingabefeld nur löschen, wenn das Kontrollkästchen auf nicht ausgewählt geändert wird.