Binding variable to [value] in Reactive Forms, Angular 6

Question

<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>

In code above, I have a directive *textEditor, which reads content of div id="divContenteditable" and returns it with the variable divField. Then I want to bind this variable to the value of invisible textarea, and read it in the component.

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

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

When i pass variable as a [ngModel] = "divField" instead of [value] = "divField", everything works fine, but I get a warning:

"It looks like you're using ngModel on the same form field as formControlName..."

How can I obtain this result with Reactive Forms approach without the use of ngModel, which causes warning?

Please remove all code that has nothing to do with this issue (basically all but form elements) — Bojan Kogoj

matchifang matchifang · Accepted Answer · 2018-11-30T13:31:56

You should only bind the <textarea> using either one of them ([ngModel] or formControlName), not both. Is there a particular reason you're using both? you can remove [ngModel] and solely use formControlName and get or set the value using form.get("description").value or set the value using form.get("description").setValue(".....").

The other option would be:

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

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

Binding variable to [value] in Reactive Forms, Angular 6

1 Answers