Angular 4 填充表单并设置为未触及

Question

创建了一个更新表单，其中基本上填充了信息。

我想要的是禁用按钮，直到更改表单中的信息

当信息被编辑时，表单组正在使用 valuechanges 来监听

但表格总是被触及，即使我改变使用

this.formGroup.markAsUntouched()

表单本身确实记录了我已将其设置为未触及的事实

setFormValues(){
      this.firstNameControl.setValue(user.firstName);
      this.lastNameControl.setValue(user.lastName);
      this.emailControl.setValue(user.email);
      this.userNameControl.setValue(user.userName);
      this.emailControl.setValue(user.email);
  //Tried setting here this.formGroup.markAsUntouched()
}

onFormChanges() {
    return this.formGroup.valueChanges
    .subscribe(val => {
        //Can set here but will always be untouched, as well if I use 
       this.formGroup.markAsUntouched()
        console.log(this.count, this.formGroup.valid, this.formGroup.touched, this.formGroup.dirty)

    });
  }

我知道上面的内容将始终保持不变，但是如果我省略它，它会在 init 上执行两次并将表单设置为已触摸，因为我想，来自 db 的信息已加载，尝试使用计数器 var；如果 counter == 2(第二次迭代)的 valuechanges 那么 this.formGroup.markAsUntouched()

哪个有效，另一件事是 html 似乎没有注册表单组被禁用

<button class="btn btn-primary btn-complimentary" type="submit" [disabled]="!formGroup.touched">

Answer 1

为了在我的表单中处理这种行为，我使用了 pristine 的组合。和 valid (仅当您对字段进行一些验证时才使用 valid)。我不使用 touched因为您可以在不更改其值的情况下触摸输入。

<button type="submit" [disabled]="formGroup.pristine || !formGroup.valid">

向服务器发送数据后，如果要重新禁用按钮，可以使用 reset() 您的 formGroup 的功能

Resets the form control. This means by default:

• it is marked as pristine
• it is marked as untouched
• value is set to null

You can also reset to a specific form state by passing through a standalone value or a form state object that contains both a value and a disabled state (these are the only two properties that cannot be calculated).

就像上面说的，您可以在 reset() 的第一个参数中提供表单的新状态。