отображать выбранное значение раскрывающегося списка, используя formControlName - ReactiveForms

Question

У меня есть выпадающий список, и я выполнил проверку с использованием formcontrolname. Я также хотел отобразить выбранное выпадающее меню. Поэтому я использовал ngModel для этого. Но я получил сообщение об ошибке:

It looks like you're using ngModel on the same form field as formControlName. Support for using the 
ngModel input property and ngModelChange event with reactive form directives has been deprecated in 
Angular v6 and will be removed in Angular v7. 

Как мне выполнить проверку и отображение выбранного раскрывающегося списка с помощью formControlName

Мой HTML код

 <nb-select selected="1" id="doctor" formControlName="titleName" required (change)="changeTitle($event)"
 [class.is-invalid]="form.get('titlename').invalid && form.get('titlename').touched" [(ngModel)]="selectedtitle">

   <nb-option *ngFor="let title of Title" [value]="title">{{title}}</nb-option>
 </nb-select>

<p>{{selectedtitle}}</p>

Мои .ts файл

Title: any=['Mr.', 'Ms.', 'Mrs.'];
selectedtitle = this.Title[0];

changeTitle(e){
    console.log(e)
    this.titleName.setValue(e.target.value,{
      onlySelf: true
    })
  }

  get titleName() {
    return this.form.get('title');
  }

Answer 1

Вам не нужно использовать [(ngModel)] для этой цели

просто используйте

<p>{{ form.value.title }}</p?

или

<p>{{ form.controls['title'].value }}</p>

Предполагая, что у вас есть formgroup как форма

<form [formGroup]="form" (ngSubmit)="onSubmit()">

, если вы хотите показать ошибки проверки

  <span class="error" *ngIf="form.controls['title'].errors.required">This field is required</span>