仅在 Angular 中更改字段时提交数据

Question

我有一个 Angular 表单：

<button mat-flat-button color="primary" [disabled]='Updateurlflag || !appawareform.dirty' *ngIf="title== 'Edit'" (click)="editappawareinfo(drawer)">Update</button>

在我的编辑抽屉中，将有三个字段。它们是 Id、IP 和 Port。在编辑时，我禁用了字段 ID。用户只能更改IP/端口或两者都更改。

如果用户没有更改编辑抽屉中的任何值，我禁用了按钮 Update。

但问题是如果我删除字段中的 1 个符号然后重新写入（值相同，但形式已更改），

我必须再次禁用按钮Update。但是我该怎么做呢？

Answer 1

如果你使用 ReactiveForms，当 formControl 改变时很容易控制

假设你有一个带有“updateOn:blur”的formControl

formControl=new FormControl('',{ updateOn: 'blur' }); 

您可以使用成对的 rxjs 运算符订阅更改，例如

this.formControl.valueChanges.pipe(
 startWith(this.formControl.value), //it's necesary send a first value
 pairwise())  //the pairwise make the "magic"
 .subscribe(([old,value])=>{
    if (old!=value)
    {
       console.log("I change from "+old+" to "+value)
    }
 })

嗯，我用的是FormControl，你可以使用FormGroup或者FormArray并订阅valueChanges

查看stackblitz

Answer 2

您可以将前一个值存储在一个对象中，并检查当前值是否与前一个值匹配。我将在下面编写示例代码：

文件Component.ts

previousValue: any = {};

previousValue = this.data; // Data fetched from the server.

isDisabled() {
  if(this.previousValue.ip === this.formGroup.ip && this.previousValue.port === this.formGroup.port) {
     return true;
   }

   return false;
}

文件Component.html

<button mat-flat-button color="primary" [disabled]='isDisabled()' *ngIf="title== 'Edit'" (click)="editappawareinfo(drawer)">Update</button>

Answer 3

如果您有反应式表单（如果没有，我建议您改为使用）存储原始值并将其与表单的值进行比较。如果您没有深度嵌套的对象，您可以安全地使用JSON.stringify 来比较两个对象。这样做：

appawareform: FormGroup;
alive = true;
noChanges = true;

// maybe getting this from backend? Here just mocking the response
data = { id: 1, ip: "myip", port: "myPort" };

constructor(private fb: FormBuilder) {
  this.appawareform = this.fb.group({
    id: [{ value: "", disabled: true }],
    ip: [""],
    port: [""]
  });

  // call this when values are available
  this.appawareform.setValue(this.data);

  this.appawareform.valueChanges
    .pipe(takeWhile(() => this.alive))
    .subscribe(val => {
      if (
        JSON.stringify(this.data) ===
        // we have a disabled field we need to use "getRawValue()"
        JSON.stringify(this.appawareform.getRawValue())
      ) {
        this.noChanges = true;
      } else {
        this.noChanges = false;
      }
    });
}

ngOnDestroy() {
  // unsubscribes subscrption on component destroy
  this.alive = false;
}

检查变量noChanges的状态，并据此禁用或启用按钮。

Stackblitz：https://stackblitz.com/edit/angular-6jo6aj?file=src/app/app.component.html