Bentuk reaktif sudut - apakah reset murni saat pengguna mengembalikan UI berubah ke nilai asli?
Saya ingin mengaktifkan tombol Kirim di formulir hanya jika input formulir diubah.
The Submit button harus dinonaktifkan ketika nilai-nilai bentuk kontrol tidak berubah.
Saya mencoba menggunakan bendera FormGroup.pristine untuk mengaktifkan / menonaktifkan tombol Kirim .
Ini berfungsi dengan baik untuk mengaktifkan tombol.
Namun, ini tidak disetel ulang ke true
saat nilai di UI diubah kembali ke nilai aslinya.
Kode komponen:
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>
Secara default, opsi "perempuan" dipilih di kotak pilih.
Ketika pengguna mengubahnya menjadi "laki-laki", misalnya, tombol Kirim diaktifkan.
Sekarang ketika pengguna memilih "perempuan" lagi, tombol Kirim tidak menjadi nonaktif.
Pengguna harus mengklik tombol Kirim untuk mendapatkan kembali status asli dan menonaktifkan tombol tersebut.
Bagaimana cara mengatur ulang ke status asli ketika pengguna mengubah kembali nilai kotak pilih ke default, tanpa mengklik tombol Kirim ?
Versi sudut: 8.2.14
.
Memperbarui
Sayangnya angular tampaknya tidak mengubah status bentuk menjadi murni, ketika pengguna mengubah UI ke nilai default.
Jadi kita harus menulis kode untuk melakukan perbandingan data dan menandai formulir ke status asli.
Jawaban
Anda dapat menggunakan metode markAsPristine untuk menyetel status asli menjadi benar, ketika data berubah kembali ke defaultValue seperti ini:
ngOnInit() {
const defaultValue = this.registrationForm.value;
this.registrationForm.valueChanges
.pipe(debounceTime(200))
.subscribe(value => {
if (JSON.stringify(defaultValue) == JSON.stringify(value)) {
this.registrationForm.markAsPristine();
}
});
}
Anda dapat membuat satu metode yang mengembalikan benar atau salah untuk menonaktifkan tombol kirim jika tidak ada yang diubah.
Dengan asumsi Anda memiliki beberapa objek yang digunakan untuk menyimpan input formulir.
Lihat kode di bawah ini untuk fungsinya:
oldObj = _.cloneDeep(this.obj)
dataChanged(){
return !_.isEqual(this.oldObj, this.obj)
}
dan di html tambahkan baris di bawah ini
<input type="submit" [disabled]="!hasChanged()">