时间戳

首页 > 解决方案 > Angular - 在选项中分配默认值

angular - Angular - 在选项中分配默认值

问题描述

 <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 个主题，几秒钟后这会将其更改为列表中的第一个

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

我注意到的问题是我在不同区域之间混合了 70 个，想法是这个 id 已经感觉存储了，然后比较它，然后按值分配它作为默认值。

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


      });
    }

标签： angular

解决方案

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

在上面的代码中，设置为表单控件的 id 将被自动选择（不需要[selected]选择控件上的属性）。

推荐阅读