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（第二次迭代）的值改变那么this.formGroup.markAsUntouched（）

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

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

Answer 1

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

this.form.markAsUntouched();

如果你想把它设置为原始

this.form.markAsPristine();

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

Answer 2

要在我的表单中处理此类行为，我使用pristine和valid的组合（仅当您对字段进行了一些验证时才使用valid）。我不使用touched，因为您可以触摸输入而不更改其值。

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

将数据发送到服务器后，如果要重新禁用该按钮，可以使用formGroup

的reset()功能

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


标记为原始

标记为未触动

value设置为null


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

就像它说的那样，你可以在reset()

的第一个参数中提供表单的新状态

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

2 个答案: