Привязка переменной к [значению] в реактивных формах, угловая 6 - PullRequest
Новая
       58

Привязка переменной к [значению] в реактивных формах, угловая 6

0 голосов
/ 30 ноября 2018 
        <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.Затем я хочу связать эту переменную со значением невидимой текстовой области и прочитать ее в компоненте. 

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

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

Когда я передаю переменную как [ngModel] = "divField" вместо [value] = "divField ", все работает нормально, но я получаю предупреждение:

" Похоже, вы используете ngModel в том же поле формы, что и formControlName ... "

Как я могу получить эторезультат с подходом Reactive Forms без использования ngModel, что вызывает предупреждение?

1 Ответ

0 голосов
/ 30 ноября 2018

Вы должны связывать <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(".....")
}
...