Angular 5 ngModel не обновляет значение

Question

Итак, у меня есть следующий компонент:

export class ModuleComponentComponent implements OnInit {
    dropzoneConf;
    fileService = environment.getFileUrl;

    constructor(
        private moduleComponentService: ModuleComponentService) {
    }

    @Input()
    selectedComponent: ModuleComponent;

    ngOnInit() {
        this.setDropZoneConfig();
    }    
}

И в этом у меня есть следующий html:

<h3 class="m-portlet__head-text m--font-success">
   <input class="form-control" type="text" [ngModel]="selectedComponent.title" />
</h3>

и способ добавления компонента в мой html:

<div class="col-lg-8 col-x1-12" *ngIf="selectedComponent != null">
   <app-module-component [selectedComponent]="selectedComponent"></app-module-component>
</div>

Когда я набираю что-то в поле ввода, оно не обновляет переменную selectedComponent.title

Может кто-нибудь сказать мне, что происходит?

Answer 1

вы должны использовать двустороннюю привязку данных

[(ngModel)]

<input class="form-control" type="text" [(ngModel)]="selectedComponent.title" />

и обязательно импортировать модуль форм в app.module.ts

import { FormsModule } from '@angular/forms';

Answer 2

Нам нужно использовать двустороннее связывание данных с [(ngModel)]

<h3 class="m-portlet__head-text m--font-success">
   <input class="form-control" type="text" [(ngModel)]="selectedComponent.title" />
</h3>

Вы должны прочитать часть о двустороннем связывании данных в документации Angular

Если вы хотите использовать только [ngModel] , вы можете, но вы должны ловить изменения с помощью (ngModelChange)

<h3 class="m-portlet__head-text m--font-success">
   <input class="form-control" type="text" [ngModel]="selectedComponent.title" (ngModelChanges)="setTitle($event)" />
</h3>

Вы можете улучшить его с помощью формпросто задайте мне любые вопросы об этом

Answer 3

Используйте двустороннюю привязку

 [(ngModel)]="selectedComponent.title"