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

假设您有表单组作为表单

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

如果你想显示错误验证

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

使用 formControlName 显示选定的下拉值 - ReactiveForms

display selected dropdown value using formControlName - ReactiveForms

form-control

angular

angular-reactive-forms