1

I'm using Angular 7 reactive forms in my component. Part of my component:

@Component({
  selector: 'my-form',
  templateUrl: './my-form.component.html',
  styleUrls: ['./my-form.component.scss']
})
export class MyFormComponent implements OnInit {
  form: FormGroup;
  loaded: boolean = false;
  item: Item;
  // item gets loaded from the server and looks like this:
  // {
  //   id: 'dksldfkfjdk',
  //   title: 'first',
  //   selected: 'basic'
  // }
  itemsForSelect = ['basic', 'primary', 'admin'];
  isNew: boolean = false;

  constructor(private route: ActivatedRoute,
    private resourceService: ResourceService,
    private fb: FormBuilder,
    private router: Router) {
  }

  ngOnInit() {

    this.resourceService.getItem().subscribe(res => {

      if (res.success) {
        this.item = res.item;
        this.createForm();
        this.loaded = true;
      }
    });
  }

  createForm() {
    this.form = this.fb.group({
      'title': [this.item.title, Validators.compose([])],
      'selected': [this.item.selected, Validators.compose([])]
    });
  }
}

Part of component HTML template related form:

<form [formGroup]="form" (ngSubmit)="isNew ? create() : update()" [class.error]="!form.valid && form.touched">
  <div class="form-group">
    <label for="item"></label>
    <select placeholder="Choose Select" [formControl]="form.controls.selected" class="form-control"
      id="item">
      <option *ngFor="let itemForSelect of itemsForSelect">{{ itemForSelect }}</option>
    </select>
  </div>
  <button class="btn btn-primary udpate pointer" [disabled]="!form.valid" type="submit">
    {{ isNew ? 'Create' : 'Update' }}
  </button>
</form>

The problem is that after updating item with, for example admin value, it has this value from server in property selected, but it still shows basic in HTML select as selected, after fetching data and showing form. How to set selected in Angular 7? I know I can use [(ngModel)] = item.selected, but as I'm using form.controls, I'm getting warning in console.

Vadi
  • 3,279
  • 2
  • 13
  • 30

2 Answers2

0

You can use patchValue on your form control like that:

public updateValue() {
this.form.get('selected').patchValue('basic');

}

Improvement: Dont use formControl with formControlName in same form control. Here is link to deeper explanation

Gregor Albert
  • 819
  • 1
  • 11
  • 23
  • still doesn't work. The problem is specifically with the `select HTML element`. For other elements (inputs) all works fine. Form's created after loading item. Though item has selected property `admin`, selected value of `HTML select element` is `basic`. – Vadi Jan 28 '19 at 21:31
  • `Dont use formControl with formControlName` - thanks, I've corrected that part – Vadi Jan 28 '19 at 21:39
0

You need to add [value] property to options

 <option
        [value]="itemForSelect"
        *ngFor="let itemForSelect of itemsForSelect"
  >{{ itemForSelect }}</option>

Sandbox: https://codesandbox.io/s/angular-l0d09

Aleksej Shovgenja
  • 3,502
  • 1
  • 14
  • 12