How to set value to a Reactive Form control in Angular6?

Question

i want to set the value of the text box on click of some other button which is present outside the form, how can i do it

<form [formGroup]='student' (ngSubmit)='click()'>
<input type='text' formControlName='name'
<input type='submit' value='submit'>
</form>
<input type='button' (click)='setValueOfTextbox()' value='some other button'>

now, when i click on this button and try to set the value, i am not able to do this

student:FormGroup

setValueOfTextbox(){
this.student.controls.name.setValue('foo')
}

how can i set the value of a button placed in the reactive form?

Does this answer your question? How to set value to form control in Reactive Forms in Angular — wentjun
– wentjun, Commented Jan 2, 2020 at 19:08

Ashish Ranjan · Accepted Answer · 2019-03-19 07:54:09Z

4

Your code works just fine, please initialize your form group and the form controls

ngOnInit() {
  this.student = new FormGroup({
    name: new FormControl()
  })
}

setValueOfTextbox(){
  this.student.controls.name.setValue('foo')
}

https://stackblitz.com/edit/angular-kwcrcp?file=src%2Fapp%2Fapp.component.ts

answered Mar 19, 2019 at 7:54

Ashish Ranjan

13k5 gold badges32 silver badges53 bronze badges

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

4 Comments

Lijin Durairaj Over a year ago

well, the code was just a snippet of a bigger and complex code, how can i set a value of checkbox? is it the same way?

Lijin Durairaj Over a year ago

i added one checkbox control and tried this and it did not work, this.student.controls.gender.setValue('true'); could you please help on this?

Lijin Durairaj Over a year ago

please see my updated stackblitz stackblitz.com/edit/angular-biwuvy?embed=1&file=src/app/…

Ashish Ranjan Over a year ago

@LijinDurairaj: It will work the same, in your stackblitz example you haven't created a formControl for gender: Check this: stackblitz.com/edit/…

Collectives™ on Stack Overflow

How to set value to a Reactive Form control in Angular6?

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related