CODEWITHSUNDEEP
angular
rja
rja

Reputation: 169

unable to bind data to input field

I am using reactive forms in my Angular App. I want to bind data to an input field of type button. I want its default value to be "testdata".i am unable to bind the data to the input field. please guide me. Thanks.

I am trying to get the data from API and display on front end using formControlName.

HTML

<form  [formGroup]='form'>
<div class="col-sm-3 form-group">
              <input class='pl-2 ' nbInput fullWidth type="button"
                     formControlName='data'>
            </div>
</form

TS

export class dataComponent implements OnInit {
selecteddata: string;
form: FormGroup;
 ngOnInit(): void {
this.form= this.FormBuilder.group {
data: [""],
}
this.form.controls.data.setvalue('testdata');
}

Upvotes: 0

Views: 636

Answers (3)

Yoann Picquenot
Yoann Picquenot

Reputation: 660

I made codesandbox example using your example. Hope it is what you are looking for.

https://codesandbox.io/s/billowing-wave-q1oqs?file=/src/app/app.component.ts

Upvotes: 0

Prakash Harvani
Prakash Harvani

Reputation: 1041

you need to use patch value instead of setvalue. like This

this.form.patchValue({data:'testdata'});

Upvotes: 2

Johar Zaman
Johar Zaman

Reputation: 2123

Here is the demo with default value as testdata: https://stackblitz.com/edit/reactive-forms-example-1

But not sure why you are using formControl on a button using reactive forms.

Upvotes: 0

Related Questions