display selected dropdown value using formControlName - ReactiveForms

Question

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

Don't use reactive form and template driven form together. You can set Default value using reactive form itself — Chellappan வ
– Chellappan வ, Commented Mar 24, 2020 at 13:13
I'm not asking about default value. I want to display the selected dropdown — Sravan Kumar
– Sravan Kumar, Commented Mar 24, 2020 at 13:35
Since you have created getter titleName. you can use that to acces selected value. — Chellappan வ
– Chellappan வ, Commented Mar 24, 2020 at 13:39

M A Salman · Accepted Answer · 2020-03-24 13:36:49Z

1

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>

answered Mar 24, 2020 at 13:36

M A Salman

3,8302 gold badges14 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sravan Kumar Over a year ago

Hey, please help me out with this question. stackoverflow.com/questions/60839181/…

Collectives™ on Stack Overflow

display selected dropdown value using formControlName - ReactiveForms

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related