ngModel в том же поле формы, что и formControlName

Question

Раньше у меня была простая форма без проверки, где HTML выглядел примерно так:

<mat-form-field>
        <input matInput
               type="text"
               placeholder="TaskName"
               [(ngModel)]="todoListService.toDoData.taskName"
               formControlName="taskName"
               required
               required>
               [(ngModel)]="todoListService.toDoData.taskName"
        >
    </mat-form-field>

Затем я переместил свою форму в реактивные формы и получил предупреждение, что у меня не может быть ngModelто же поле, что и formControlname.Изо всех сил, как я должен назначить данные из формы для поля ввода службы.

Текущий раздел HTMl:

<form [formGroup]="todoForm">
    <mat-form-field>
        <input matInput
               placeholder="TaskName"
               formControlName="taskName"
               required
               [(ngModel)]="todoListService.toDoData.taskName"
        >
    </mat-form-field>

Поэтому я удалил строку ngModel и добавил этона мой TS:

saveToDo() {
        this.dialogRef.close();
        this.todoListService.toDoData.taskName = this.todoForm.get('taskName');
        this.todoListService.toDoData.dueDate = this.todoForm.get('dueDate');
        this.todoListService.toDoData.extraNote = this.todoForm.get('extraNote');
        this.todoListService.addToDo();
    }

Ошибки, которые я получаю от этого:

ERROR in src/app/new-to-do-dialog/new-to-do-dialog.component.ts(31,9): error TS2322: Type 'AbstractControl' is not assignable to type 'string'.
src/app/new-to-do-dialog/new-to-do-dialog.component.ts(32,9): error TS2322: Type 'AbstractControl' is not assignable to type 'DateConstructor'.
  Property 'prototype' is missing in type 'AbstractControl'.
src/app/new-to-do-dialog/new-to-do-dialog.component.ts(33,9): error TS2322: Type 'AbstractControl' is not assignable to type 'string'.

По-видимому, я неправильно понял что-то о доступе к данным из формы.

Я следовал этому руководству и этому примеру:

https://angular.io/api/forms/FormControlName#use-with-ngmodel https://stackblitz.com/edit/example-angular-material-reactive-form

Спасибо за любую помощь!

Answer 1

Начиная с Angular 7 и выше, вы не можете одновременно использовать formControlName и ngModel.Если вы хотите использовать управляемые шаблоном формы , вы можете использовать ngModel, а если вы хотите использовать реактивные формы , вы не можете использовать ngModel.(Простой)

КАК вы решили следовать реактивные формы подход:

В HTML:

<input type="text" (change)="onChangeCode($event.target.value)" formControlName="code" id="txtCode">

В ТС:

selectedCode: string = "";

onChangeCode(code: string) {
   this.selectedCode = code;
}

Answer 2

Здесь this.todoForm.get('controlname') возвращает объект AbstractControl, поэтому получите доступ к значению из объекта, как показано ниже

saveToDo() {
        this.dialogRef.close();
        this.todoListService.toDoData.taskName = this.todoForm.get('taskName').value;
        this.todoListService.toDoData.dueDate = this.todoForm.get('dueDate').value;
        this.todoListService.toDoData.extraNote = this.todoForm.get('extraNote').value;
        this.todoListService.addToDo();
    }

Надеюсь, это поможет!