Angular - назначить значение по умолчанию в опции

Question

 <form [formGroup]="formularioedit" #formRegister="ngForm" (ngSubmit)=" updateMensaje()">
  <select formControlName="subareas" *ngIf="!nomostrarsubarea" style="width:120px">
 <option *ngFor="let opciones of subareas" [value]="opciones.id" >
    {{opciones.NameSubArea}}
     </option>
      </select>
       <select formControlName="temas" *ngIf="!nomostrartema"   (change)="capturarTema()" style="width:120px">
       <option *ngFor="let temario of temas" [value]="temario.id"  >
       {temario.NameTema}}</option>
        </select>
        </form>

Мне нужно назначить значение по умолчанию в списке, проблема в том, что у меня зарегистрировано 70 тем, и через несколько секунд это изменится Это первое в списке по умолчанию.

    const params = this.activatedRoute.snapshot.params;

    if (params) {
      this.ejercicioService.getEjercicio(params.id).subscribe(res => {
        this.ejercicio = res;
        console.log("Ejercicio: " + this.ejercicio);
        console.log("ID TEMA: " + this.ejercicio.tema);
        this.getAreas();
        this.getSubAreas();



        if (this.ejercicio.idArea == "2") {

          this.getTemasFisica();
          this.nomostrarsubarea = true;
          this.nomostrartema = false;
        }
        if (this.ejercicio.idArea != "2") {

          if (this.ejercicio.subarea === '15') {
            this.nomostrartema = true;
          } else {
            this.nomostrartema = false;
            this.gettemas();
          }
          // console.log("Distinto de 2");
          this.gettemas();
        }
        if (this.ejercicio.idArea === '3') {
          this.nomostrartema = true;
          this.nomostrarsubarea = false;
          //console.log("presionaste algo distinto a fisica");
          //this.getSubAreas();
        }
        console.log("Tema Actual: " + this.ejercicio.tema);

        this.formularioedit.controls['subareas'].setValue(this.ejercicio.subarea);
        this.formularioedit.controls['temas'].setValue(this.ejercicio.tema);


      });
    }

Answer 1

Демонстрация Stackblitz

Вы смешиваете реактивные формы с шаблонными формами. Не делай этого. Придерживайтесь одной из них, предпочтительно реактивных форм:

<form [formGroup]="_form">
  <select formControlName="temas" 
          *ngIf="!nomostrarsubarea"
          style="width:120px">
    <option *ngFor="let temario of temas" 
      [value]="temario.id">
      {{temario.NameTema}}
    </option>
  </select>
</form>

_form: FormGroup;

constructor(private _fb: FormBuilder) {
  this._form = this._fb.group({
    temas: defaultTemarioId,
  });

  // If you want to change it later, you can do:
  //
  //   this._form.patchValue({temas: newTemarioId});

  // This replaces the `(change)` event you where listening to on the template
  this._form.get('temas').valueChanges.subscribe((temarioId: any) => {
    console.log(`Selected tema id: ${temarioId}`);
  });
}

В приведенном выше коде идентификатор, установленный для элемента управления формы, будет выбран автоматически (нет необходимости в атрибуте [selected] в элементе управления select. ).