时间戳

首页 > 解决方案 > 在反应形式中将变量绑定到 [value]，Angular 6

angular - 在反应形式中将变量绑定到 [value]，Angular 6

问题描述

<form [formGroup]="form"#postForm="ngForm" (submit)="onSaveTicket()">
  <div class="text-editor-container">
    <div *textEditor="let btnClick = controller; let divField">
      <div class="text-editor__inputContainer">
        <div #myDiv id="divContenteditable" contenteditable="true" [innerHtml]="editedTicket?.description">
          Please enter a description
        </div>

        <mat-form-field>
          <textarea 
             matInput
             type="text"
             formControlName="description"
             required
             [ngModel] = "divField"
             placeholder="Description">
          </textarea>
          <mat-error *ngIf="form.get('description').invalid">Please enter a description</mat-error>
        </mat-form-field>
      </div>
    </div>
  </div>

  <button mat-raised-button type="submit" class="btn--cyan">Add Ticket</button>
</form>

在上面的代码中，我有一个指令 *textEditor，它读取 的内容div id="divContenteditable"并用变量divField. 然后我想把这个变量绑定到invisible textarea的值上，并在组件中读取。

ngOnInit() {
  this.form = new FormGroup({
    description: new FormControl(null, {validators: [Validators.required]})
  });

  this.form.valueChanges.subscribe(val => {
    console.log(val);
  })
}

当我将变量作为 a[ngModel] = "divField"而不是传递时[value] = "divField"，一切正常，但我收到警告：

“看起来您在与 formControlName 相同的表单字段上使用 ngModel...”

如何在不使用 ngModel 的情况下使用 Reactive Forms 方法获得此结果，这会导致警告？

标签： angularangular6angular-reactive-formsangular-ngmodelangular-forms

解决方案

<textarea>您应该只使用其中之一（[ngModel]或）绑定formControlName，而不是两者。您同时使用两者有什么特别的原因吗？您可以删除 [ngModel] 并仅使用 formControlName 并使用获取或设置值或使用form.get("description").value设置值form.get("description").setValue(".....")。

另一种选择是：

<div #myDiv id="divContenteditable" (change)=contentChange($event)>
   Please enter a description
</div>

contentChange(event: any){
   console.log(event.value)
   form.get("description").setValue(".....")
}

推荐阅读