How to set value to FormBuilder object in angular 2 Typescript

Question

I am used Reactive form Validation(Model driven validation) but cant set the value to form object on Dropdown change

This is my Formgroup

studentModel:StudenModel
AMform: FormGroup;
Name = new FormControl("", Validators.required);
Address = new FormControl("", Validators.maxLength(16));

constructor(fb: FormBuilder){     
  this.AMform = fb.group({
    "Name": this.Code,
    "Address": this.Abbrev,
  });
}
onAccntChange(event: Event) {
  // set the value from Class Model
  ////  this.studentModel 
  // how to set this.studentModel value to form
}

This is My html page

<form [formGroup]="AMform" (ngSubmit)="submit()">
    <select (change)="onAccntChange($event)" class="form-control" [disabled]="ddlActivity" formControlName="AccountManagerID">
        <option value="0">Select</option>
        <option *ngFor="let item of allStudent" value={{item.StudentID}}>
            {{item.Name}}
        </option>
    </select>

    <div class="col-sm-9">
        <input type="text" class="form-control" formControlName="Name">
    </div>
    <div [hidden]="Name.valid || Code.pristine" class="error"> Name is required </div>

    <div class="col-sm-9">
        <input type="text" class="form-control" formControlName="Address">
    </div>
    <div [hidden]="Address.valid || Address.pristine" class="error">Address is required </div>

    <button type="submit" class="btn btn-warning "><i class="fa fa-check-square"></i> Save</button>
</form>

On change i need to set the formcontrol value

Does this answer your question? Manually Set Value for FormBuilder Control — Vibhor Dube
– Vibhor Dube, Commented Jun 3, 2020 at 16:11

Maciej Treder · Accepted Answer · 2016-10-17 08:01:12Z

15

You can achievie that by invoking setValue method on your FormControl object:

  (<FormControl> this.AMform.controls['Name']).setValue("new value");

or:

this.Name.setValue("new value");

answered Oct 17, 2016 at 8:01

Maciej Treder

12.4k6 gold badges59 silver badges77 bronze badges

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

3 Comments

coder Over a year ago

can u pls this one

coder Over a year ago

Name = new FormControl({ value:'', disabled: true }, [Validators.required, Validators.maxLength(10) ]); i want to disabled false on change can u pls tell me the solution...

Pian0_M4n Over a year ago

You can also use "as" const fc = this.AMform.controls['Name'] as FormControl; fc.setValue('new value');

jmachnik · Accepted Answer · 2016-10-17 08:02:07Z

6

Use patchValue method of your FormGroup object.

 onAccntChange(event: Event) {
    this.AMform.patchValue({yourControl: studentModelValue})
    }

answered Oct 17, 2016 at 8:02

jmachnik

1,1209 silver badges19 bronze badges

Comments

hestellezg · Accepted Answer · 2019-02-14 16:54:24Z

5

Using setValue you need to specify all the FormControls:

this.AMform.setValue({'Name':'val1', 'Address':'val2'})

Using patchValue you can specify just the one you need:

this.AMform.patchValue({'Name':'val1'})

Here you can read a little bit more.

edited Feb 14, 2019 at 16:54

answered Sep 21, 2017 at 18:48

hestellezg

3,7913 gold badges36 silver badges38 bronze badges

Collectives™ on Stack Overflow

How to set value to FormBuilder object in angular 2 Typescript

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related