Forme reattive angolari: pristine si ripristina quando l'utente ripristina le modifiche dell'interfaccia utente ai valori originali?
Desidero abilitare il pulsante Invia nel modulo solo quando viene modificato l'input del modulo.
Il pulsante Invia dovrebbe essere disabilitato quando i valori di controllo del modulo non vengono modificati.
Ho provato a utilizzare il flag FormGroup.pristine per abilitare / disabilitare il pulsante Invia .
Funziona bene per abilitare il pulsante.
Tuttavia, non viene ripristinato true
quando il valore nell'interfaccia utente viene riportato al valore originale.
Il codice del componente:
import { Component } from '@angular/core';
import { FormBuilder } from '@angular/forms';
@Component({
selector: 'app-registration-form',
templateUrl: './registration-form.component.html',
styleUrls: ['./registration-form.component.scss']
})
export class RegistrationFormComponent {
public registrationForm;
public formValues = {
gender: 1,
};
constructor(private formBuilder: FormBuilder) {
this.registrationForm = formBuilder.group(this.formValues);
}
onSubmit(formData) {
console.log('Your form is submitted', formData);
this.registrationForm.reset(this.formValues);
}
}
<form class="registration-form" [formGroup]="registrationForm" (ngSubmit)="onSubmit(registrationForm.value)">
<div>
<label for="gender">Gender</label>
<select id="gender" formControlName="gender">
<option value=1>female</option>
<option value=2>male</option>
<option value=3>do not specify</option>
</select>
</div>
<input type="submit" [disabled]="registrationForm.pristine">
</form>
Per impostazione predefinita, l'opzione "femmina" è selezionata nella casella di selezione.
Quando l'utente lo cambia in "maschio", ad esempio, il pulsante Invia è abilitato.
Ora, quando l'utente seleziona di nuovo "femmina", il pulsante Invia non viene disabilitato.
L'utente deve fare clic sul pulsante Invia per tornare allo stato originale e disabilitare il pulsante.
Come ripristinare lo stato originale quando l'utente riporta il valore della casella di selezione al valore predefinito, senza fare clic sul pulsante Invia ?
Versione angolare: 8.2.14
.
Aggiornare
Purtroppo angolare non sembra cambiare lo stato del modulo in incontaminato, quando l'utente modifica l'interfaccia utente ai valori predefiniti.
Quindi dobbiamo scrivere il codice per fare il confronto dei dati e contrassegnare il modulo allo stato incontaminato.
Risposte
È possibile utilizzare il metodo markAsPristine per impostare lo stato incontaminato true, quando i dati tornano a defaultValue in questo modo:
ngOnInit() {
const defaultValue = this.registrationForm.value;
this.registrationForm.valueChanges
.pipe(debounceTime(200))
.subscribe(value => {
if (JSON.stringify(defaultValue) == JSON.stringify(value)) {
this.registrationForm.markAsPristine();
}
});
}
È possibile creare un metodo che restituisca vero o falso per disabilitare il pulsante di invio se non viene modificato nulla.
Supponendo che tu abbia qualche oggetto che viene utilizzato per memorizzare gli input del modulo.
Fare riferimento al codice seguente per la funzione:
oldObj = _.cloneDeep(this.obj)
dataChanged(){
return !_.isEqual(this.oldObj, this.obj)
}
e nell'html aggiungi la riga sottostante
<input type="submit" [disabled]="!hasChanged()">