[英]How to check if each form control changed their value in reactive forms?
我最終想要實現的是查看我的表單中的哪些表單控件已更改,並創建一個新的 object,如果它們被更改,則分配 boolean 為 true,否則為 false。 請看下面我到目前為止所取得的成就,但我認為這不是正確的方法,因為當我從控件中獲得更多時,我的方法將變得巨大。 如果你們知道我該如何解決這個問題,我將不勝感激。
我的 Html
<form [formGroup]="editProfileForm">
<ion-row>
<ion-col>
<ion-input
*ngIf="profileData"
formControlName="firstName"
placeholder="First Name"
></ion-input>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-input
*ngIf="profileData"
formControlName="lastName"
placeholder="Last Name"
></ion-input>
</ion-col>
</ion-row>
</form>
<ion-fab
vertical="bottom"
horizontal="center"
slot="fixed"
(click)="onSubmitEditedProfile()">
<ion-fab-button>
<ion-icon name="checkmark-outline"></ion-icon>
</ion-fab-button>
</ion-fab>
我的 TS
onSubmitEditedProfile() {
if (this.profileData !== null) {
let updatedFirstName = this.editProfileForm.get("firstName").value;
if (this.profileData.firstname !== updatedFirstName) {
}
console.log("it's the same");
} else {
console.log("it's different")
}
正如我的方法的意思,我會為lastName
做同樣的事情等等
這是一個示例,您可以在其中迭代每個表單控件並根據填充的 object 新數組來識別它是否已更改。
onSubmitEditedProfile() {
const formValue = [];
// iterate over form controls no matter how many control you have.
Object.keys(this.form.controls).map((key) => {
// create a new parsed object
const parsedValue = {
[key]: this.form.get(key).value, // key is the actual form control name
changed: this.form.get(key).dirty // added changed key to identify value change
}
// push each parsed control to formValue array.
formValue.push(parsedValue)
})
console.log(formValue)
}
這是 stackblitz 工作演示
希望這能滿足您的要求。
您只需要讀取 FormGroup 或單個 FormControl 上的臟值
https://angular.io/api/forms/AbstractControl#dirty
onSubmitEditedProfile() {
if (!this.editProfileForm.dirty) {
console.log("it's the same");
} else {
console.log("it's different")
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.