如果表格有任何变化，我需要倾听，如果有变化，请启用/禁用“保存”按钮 |角

Posted 2023-02-22

【中文标题】如果表格有任何变化，我需要倾听，如果有变化，请启用/禁用“保存”按钮 |角

【英文标题】：I need to listen if there any changes in the form, make enable/disable SAVE button if there changes or not | Angular

【发布时间】：2021-08-22 12:25:02

【问题描述】：

在收听页面上的任何更改时遇到问题 有一些信息，即使没有更改 SAVE 按钮也可以点击

ngOnInit(): void 
        this.createConfigForm()

        this.configFilterForm.valueChanges.pipe(takeUntil(this.unsubscribeAll$)).subscribe(value => 
            value
        )
 

<!-- ADD BUTTON -->
            <button
                *ngIf="isUpdate()"
                [disabled]="configFilterForm"
                mat-raised-button
                class="add-config-button"
                (click)="onSave()"
                trackClickSnowplow
                id="config-form_save_button"
            >
                <span>SAVE</span>
            </button>

我想我需要订阅，但没有找到可以订阅的地方

【问题讨论】：

请发布完整的问题/代码，并可能附上屏幕截图。试试 Stackblitz 以获得快速正确的帮助。

我更新了部分代码，实际上现在按钮已禁用，但在更改值后它并没有改变其状态

我要求发布整个代码，这将有助于社区更好地为您提供帮助。有时猜测可能会导致错误的答案和浪费时间。

【参考方案1】：

像现在一样聆听表单的变化，每次有变化时，启用按钮。单击按钮时禁用按钮，它将保持禁用状态，直到发生更改。比如：

configFilterForm: FormGroup;
isDisabled = true;

constructor(private fb: FormBuilder) 
  this.configFilterForm = this.fb.group(
    input1: ['hello']
  );

  this.configFilterForm.valueChanges.pipe(
    takeUntil(this.unsubscribeAll$)
  ).subscribe(value => 
     this.isDisabled = false;
  );

还有按钮：

<button [disabled]="isDisabled">Submit</button>

HERE'S A DEMO

顺便说一句，我看到你在你的按钮上调用了一些函数*ngIf="isUpdate()"。请不要这样做，它们在每次更改检测时都会被调用，并且确实会减慢您的应用程序的速度。改用变量！

【讨论】：

非常感谢这确实有效，我只是添加了一些代码以使其正常运行=）

【参考方案2】：

在您的 html 文件中；

<form [formGroup]="formAngular" (ngSubmit)="onSubmit()">
        <label>Name</label>
        <input type="text" formControlName="name">

        formAngular.controls.name.errors | json

        <p 
            *ngIf="formAngular.controls.name.errors?.required && formAngular.controls.name.touched && formSend">
            It is required your name
        </p>

    <input type="submit" value="Send"  />

    <p  *ngIf="formSend && !formAngular.valid">Form is not complete</p>

</form>

在您的组件 TS 文件中；

  formAngular: FormGroup;

  formSend: boolean;

  constructor() 
    this.formSend = false;
    this.formAngular = new FormGroup(
      name: new FormControl('', [
        Validators.required,
        Validators.maxLength(10)
      ])
  

onSubmit() 
    this.formSend = true;
    console.log("Form value: ", this.formAngular.value);
  


ngOnInit() 
    const controlName = this.formAngular.controls.name;
    controlName.valueChanges.pipe(debounceTime(500)).subscribe(value => 
      console.log("Your changes: ", value);
    );