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 上执行两次并将表单设置为触摸，因为，我想，来自数据库的信息已加载，已尝试使用计数器 var; 如果 valuechanges 的 counter == 2 （第二次迭代）则 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

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

• 它被标记为原始
• 它被标记为未触及
• 值设置为空

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

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

Answer 2

要再次设置表单不变，我们可以简单地使用

this.form.markAsUntouched();

如果你想将其设置为原始

this.form.markAsPristine();

注意：我们还可以将特定的表单控件设置为未触及或原始。