CODEWITHSUNDEEP
angularangular-forms
chris
chris

Reputation: 2820

How to set value to Form in Angular using FormControl

<div class="form-group" [formGroup]="gGroup">
  <label for="grouplabel">Group</label>
  <select formControlName="groupControl" [(ngModel)]="groupobj" (ngModelChange)="onSelectGroup($event)" id="group" class="form-control">
        <option>Select</option>
        <option *ngFor="let group of groups" [selected]="current_group === group.name">{{group.name}}</option>
  </select>
</div>

How can I set the value of the <select> field to Select dynamically in the Component?

I looked at the docs, https://angular.io/api/forms/FormControlName#use-with-ngmodel but still no example that can help me.

Attempt:

this.gGroup.get('groupControl').setValue('Select');

Upvotes: 9

Views: 61905

Answers (4)

Dilshan
Dilshan

Reputation: 61

Try the following examples that i have been created. HTML:

  <form [formGroup]="myform" (ngSubmit)="onSubmit()">
        <label for="grouplabel">Animals</label>
        <select formControlName="animalName" class="form-control">
            <option *ngFor="let animal of animals">{{animal.name}}</option>
      </select>
    </form>

Typescript:

  myform: FormGroup;
  animals: String[] = ["cat", "cow", "elephant"];
  constructor(private formBuilder: FormBuilder) {
   this.myform = this.formBuilder.group({
      animalName : [""]
    })`enter code here`
  }

live example: https://stackblitz.com/edit/angular-1bmzur

Upvotes: 0

NnN
NnN

Reputation: 463

If we want to set value to all the formControl inside a formGroup then you can go with setValue or if we want to set value to any one of the formControl inside a formGroup then we can go with patchValue

setValue(assuming formGroup has 2 formControls)

formgroup.setValue({name: ‘Mocrosoft’, age: ‘25’});

patchValue

formgroup.patchValue({name:’Mocrosoft’});

Or you can do,

this.yourFormgroup.get("yourFormControl").setValue("yourValue");

Upvotes: 4

Superiom
Superiom

Reputation: 408

It is not a good idea to mix Reactive Forms and Template Driven Forms together, that is formGroup/formControlName and ngModel binding in the same form control.

If I am not mistaken, this is deprecated in Angular 6, and will be removed in Angular 7. At least that was the warning I got in console few days ago. Simply put, use Reactive Forms if you need to work with dynamic form rendering and complex form validation (cross field validation, custom validators etc.), and use Template Driven Forms for simpler forms that require simple validation.

Now back to your question. In Reactive Forms (in your specific example), a value can be set in the following way:

this.gGroup.controls[this.groupControl].setValue()

Please check the following link: https://stackblitz.com/edit/angular-kskgbp

Hope this helps.

Upvotes: 8

JCAguilera
JCAguilera

Reputation: 976

I figured out a way to do this: 

<form #f="ngForm">
  <select name="option" ngModel>
    <option value="" disabled>Choose an option</option>
    <option *ngFor="let option of options" [ngValue]="option">
      {{ option.title }}
    </option>
  </select>
</form>


this.f.controls.state.setValue(this.options[0]);

Check this example I made:

https://stackblitz.com/edit/angular-xpeth8

Upvotes: 10

Related Questions