Angular 4填充形式并设置为未触及

Question

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

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

表单组使用值更改来在编辑信息时进行侦听

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

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的信息被加载，尝试使用counter 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函数

重置表单控件。这意味着默认情况下：

• 它被标记为原始的
• 它标记为未触及
• value设置为null

您还可以通过传递包含值和禁用状态的独立值或表单状态对象来重置为特定的表单状态（这些是仅有的两个无法计算的属性）。

就像它说的那样，你可以在reset()的第一个参数中提供表单的新状态