How to use 'ngModel' with form control name?

Question

I have 2 textareas, if the user enters or inserts the value, need to update on other textarea field as well.

My be I can use the change function to do that, But I tried to use the ng-model with the control name. getting error. how to fix this? or can't we use the control name with ngmodel to gathered?

here is my textarea:

<textarea name="control-name" [(ngModel)]="control_name_text" formControlName="ControlName"  [ngModelOptions]="{standalone: true}" cols="85" rows="5" placeholder="Enter Control Name"></textarea>

another one:

<textarea name="pageUrl" [value]="control_name_text"  cols="85" rows="5" placeholder=""></textarea>

i have declared the control_name_text - in ts file as well. getting error as:

Can't bind to 'ngModelOptions' since it isn't a known property of 'textarea'.

any help? Thanks in advance.

Solution 1

There's no reason to use ngModel with reactive forms if thats what you are doing.

In this case you can just grab the value from the form control and use that for the input value

<form [formGroup]="exampleForm">
  <textarea formControlName="userText" cols="85" rows="5" ></textarea>
  <textArea [value]="userText"> </textArea> 
</form>

Its not required but in your component you can also shorten the formControl reference using a get property.

get userText() {return this.exampleForm.get('userText').value }

Example: https://stackblitz.com/edit/angular-sjn6du

Solution 2

Note: "Using Reactive Froms with ngModel is deprecated in angular 6 and will be removed in angular 7"

so you have to remove formControlName="ControlName" from the first textarea.

<textarea name="control-name" [(ngModel)]="control_name_text"   [ngModelOptions]="{standalone: true}" cols="85" rows="5" placeholder="Enter Control Name"></textarea>

<textarea name="pageUrl" [value]="control_name_text"  cols="85" rows="5" placeholder=""></textarea>

Edit 2

If you want to use reactive form use like this

<form [formGroup]="groupForm" >
  <textarea  formControlName="name" placeholder="Group Name" #textArea>
  </textarea>
</form>
<textarea name="" id="" cols="" rows="" [value]="textArea.value" [(ngModel)]="control_name_text"></textarea>

working stackbliz example

Comments

[JoshG]

Are you importing FormsModule in your app.module.ts?

[Eliseo]

in .html, you can get the value of a reactive form control like [value]="myForm.get('myControlName').value" -if you has a formGroup "myForm" with a formControl "myControlName". NOT use [(ngModel)]

[AT82]

Please take a look at this: angular.io/guide/reactive-forms There is all you need to know. First off, don't use ngModel with reactive forms.

[user2024080]

But I have the form module already. unless adding this field all were worked well

[user2024080]

I am using reactive form, so required for validations. if I remove that, how can i validation with reactive form?

[Ebin Manuval]

you can't use both reactive form and ngModel together because that feature is depreciated in angular6

[Falcon]

In the second option, you should add [ngModelOptions]="{standalone: true}" to avoid ngModel cannot be used to register form controls with a parent formGroup directive error. e.g. : <textarea name="" id="" cols="" rows="" [value]="textArea.value" [(ngModel)]="control_name_text" [ngModelOptions]="{standalone: true}"></textarea> to avoid registering this form control we need to indicate that it's standalone in ngModelOptions.