CODEWITHSUNDEEP
angularangular-reactive-formsform-control
Sravan Kumar
Sravan Kumar

Reputation: 632

display selected dropdown value using formControlName - ReactiveForms

I have a dropdown and i have done validation using formcontrolname. I also wanted to display the selected dropdown. So i used ngModel for this to happen. But I received an error saying 

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.

How can i achieve both validation and displaying selected dropdown using formControlName

My HTML code

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

My .ts file

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');
  }

Upvotes: 0

Views: 1952

Answers (1)

M A Salman
M A Salman

Reputation: 3820

You dont need to use [(ngModel)] for this purpose

just use 

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

or 

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

Assuming you have formgroup as form

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

if you want to show errors validation

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

Upvotes: 1

Related Questions