Question

在我的angular2应用程序中，我有一个反应形式，如：

   <form [formGroup]="personForm" novalidate>
      <input class="form-control" 
        [ngClass]="{'edited':personForm.value}" // this line*
        formControlName="name">
      <label>Name</label>
      //here i have more other inputs like this one
   </form>

当我创建一个新人和我正在编辑一个现有的人时，这个表单用于两种情况。所以我想知道如何在编辑或创建新人时更改“已编辑”的属性。 'personForm.value'始终为true，因此它无效。

Answer 1

personForm.value是一个json对象，它包含formGroup的所有字段和对应值表单无法知道您是在编辑现有人员还是创建新人员，您需要使用组件变量并检查自己的编辑。（例如，检查路线参数中的id变量）

Answer 2

这是一个可能的解决方案。

在与您的表单相对应的类中

.
.
.
export class MyForm ... {
  isEditing = false;

  onFocus() {
    this.isEditing = true;
  }
  onBlur() {
    this.isEditing = false;
  }
}

然后像这样修改你的模板

<form [formGroup]="personForm" novalidate>
    <input class="form-control" (focus)='onFocus()' (blur)='onBlur()'
        [ngClass]="{'edited':isEditing}" // this line*
        formControlName="name">
     <label>Name</label>
      //here i have more other inputs like this one
</form>

如何知道在angular2上是否正在编辑被动表单

2 个答案: