Question

我想检查表单中是否至少有一个字段已更改。如果此方案为真，则disableButton将设置为 true ，如果表单中无更改，则 false 。以下是我目前的代码：

// this.hold is an array that temporary holds the previous values of 
// the form for comparison of the changes in form

if(this.data.process == 'update') {
   for(const f in form.value){
       if (form.value[f] == this.hold[f])
           this.disableButton = true;
       else
           this.disableButton = false;
   }
}

问题是，该按钮仅在所有字段时禁用改变。我应该在我的条件或for循环中添加什么？

Answer 1

角度曲目形成控件值，如果其中任何一个已更改，则将状态设置为dirty。您不需要手动检查每个控件。只需使用表单的.dirty属性：

this.disableButton = form.dirty;

如果你想排除＆＃34;回溯＆＃34; - 添加然后删除某些内容，当更改的值与最初的相同时，您可以使用markAsPristine()方法将控件设置为pristine状态。您可以拥有初始值的对象：

const initialValues = {prop: 3};
form.valueChanges.subscribe((changes)=>{
    for (prop in changes) {
       if (changes[prop] === initialValues[prop]) {
           form.get(prop).markAsPristine();
       }
    }
});

Answer 2

freertos属性（或反pristine属性）是您追求的目标。它已在AbstractControl课程中定义，并指出是否对您的dirty，FormControl或FormGroup进行了任何更改。

Answer 3

当您发现值已更改时，只需添加一个中断。

if(this.data.process == 'update') {
   for(const f in form.value){
       if (form.value[f] == this.hold[f]){
           this.disableButton = true;

       }    
       else{
          this.disableButton = false;
          break;
        }

   }
}

Answer 4

editForm: FormGroup;
    this.editForm = this.fb.group({
      editCountry: ['', Validators.required],
      editDate: ['', Validators.required],
      editHolidayName: ['', Validators.required],
    });
     <div>
    <button [disabled]="!editForm.dirty" type="button" class="btn btn-primary miracle-submit m-t-5">Save</button>
    </div>

Angular 2：如果表单有变化，则禁用按钮

4 个答案: