Angular - Assign default value in option

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>

I need to assign a default value in the list, the problem is that I have 70 topics registered, and after a few seconds this will change it to the first in the list

  ejercicio: EjercicioInterface = {
    exerciseTitle: '',
    exercise: '',
    answers: '',
    idArea: '',
    subarea: '',
    punctuation: 0,
    correctAnswer: '',
    date: null,
    tema: '',
    nivel: '',
    universidad: '',
    fecha: null,
    alternativa1: '',
    alternativa2: '',
    alternativa3: '',
    alternativa4: '',
    alternativa5: '',
    admision: '',
    identificador: '',
  };

The problem I notice is that I have the 70 mixed between different areas, the idea is that this id already feels stored, and compare it and then assign it by value as a default.

    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);


      });
    }

julianobrasil · Accepted Answer · 2020-05-02 12:13:12Z

1

Stackblitz demo

You're mixing reactive forms with template-driven forms. Don't do that. Stick to one of them, preferably reactive forms:

<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}`);
  });
}

In the code above, the id set to the form control will be selected automatically (no need for a [selected] attribute on select control).

edited May 2, 2020 at 12:13

answered May 1, 2020 at 22:50

julianobrasil

9,4472 gold badges38 silver badges58 bronze badges

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

8 Comments

Eduardo Gonzalez Over a year ago

Excuse me can you double check? I had copied the subarea code, when in fact it is about topics

Eduardo Gonzalez Over a year ago

Declare everything as is and you mention it and I keep getting the same problem

Eduardo Gonzalez Over a year ago

Add some changes to the code, according to what you sent, I think that the value is assigned first and then it is that it repaints the screen with the themes

julianobrasil Over a year ago

Do you think you'd be able to reproduce it on stackblitz.com?

Eduardo Gonzalez Over a year ago

I can't = (, in the code I have some references to the database

|

Collectives™ on Stack Overflow

Angular - Assign default value in option

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related