CODEWITHSUNDEEP
angularangular-formsangular8
user2024080
user2024080

Reputation: 5101

How to use 'ngModel' with form control name?

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.

Upvotes: 3

Views: 37425

Answers (3)

devBrandon
devBrandon

Reputation: 141

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

Upvotes: 5

Ebin Manuval
Ebin Manuval

Reputation: 1255

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

Upvotes: 2

Sajeetharan
Sajeetharan

Reputation: 222582

The HTML template you posted looks fine. To use two-way data binding for form inputs you need to import the FormsModule package in your Angular module.

import { FormsModule } from '@angular/forms';

@NgModule({
    imports: [
         FormsModule      
    ]

Upvotes: 0

Related Questions