Question

我正在尝试在Angular 2 Reactive Form中实现内联文本编辑器。

我理解，使用Reactive Forms，formControlName用于绑定组件中声明的FormGroup。这适用于原生<input>标记。但是，我想使用内联文本编辑器而不是<input>。我已经尝试寻找能够实现这一目标的模块，组件和指令，但到目前为止还没有与Reactive Forms一起工作。我的搜索错过了吗？

到目前为止，我已经通过使用ng-class和CSS构建自己的内联文本编辑器来改变<label>和<input>的可见性并切换课程，从而实现了我想要的目标通过按钮点击。正如您在下面所看到的，我也尝试在FormArray内执行此操作，因此一次只能激活一个内联编辑器。

.hideWhenActive {
  display: none;
}

.form-control.no-border {
  border: 0;
  box-shadow: none;
}

<div *ngFor="let control of form.get('formGroup').controls; let i = index" [formGroupName]="i">
  <label class="form-control no-border" [ngClass]="hideWhenActive: i == activeIndex}" (click)="onClick(i)">{{control.value['name']}}</label>
  <input type="text" class="form-control" formControlName="name" [ngClass]="{hideWhenActive: i != activeIndex }">
</div>

Angular 2 Reactive Forms中的内联编辑器？

0 个答案: