时间戳

首页 > 解决方案 > 表单相关字段反应表单Angular

angular - 表单相关字段反应表单Angular

问题描述

我有以下数据结构：

formAviso: FormGroup;

deapartamentos: [
  {nombre: 'Amazonas', codigo: 41},
  {nombre: 'Ancash', codigo: 43},
  {nombre: 'Apurimac', codigo: 83},
  ...
]

constructor() {
  this.formAviso = this.fb.group ({
    departamento: [ '', Validators.required ],
    codigoCiudad: [ '', Validators.required ],
  });
}

所以在我的反应形式中，它看起来像这样：

<form [formGroup]="formAviso" (ngSubmit)="crearAviso()" novalidate>

<mat-form-field appearance="outline" class="col-12 col-md-6">
    <mat-select formControlName="departamento">
      <mat-option *ngFor="let departamento of departamentos [value]="departamento.nombre">{{departamento.nombre}}
      </mat-option>
    </mat-select>
</mat-form-field>

<mat-form-field appearance="outline" class="col-12 col-md-6">
    <mat-select formControlName="codigoCiudad">
      <mat-option *ngFor="let departamento of departamentos [value]="departamento.codigo">{{departamento.codigo}}
      </mat-option>
    </mat-select>
</mat-form-field>

</form>

所以我的查询是我如何做到的，当我在 中选择一个项目时departmento，该项目的相应代码号会自动在codigoCiudad. 这是可能的？

例如，如果我选择Ancash，则第二次选择中选择的值应该是43。

标签： angularangular-reactive-forms

解决方案

你想做这样的事情：

constructor() {
  this.formAviso = this.fb.group ({
    departamento: [ '', Validators.required ],
    codigoCiudad: [ '', Validators.required ],
  });

  const deptCtrl = this.formAviso.get('departamento');
  const codCtrl = this.formAviso.get('codigoCiudad');
  deptCtrl.valueChanges.subscribe(nombre => {
    if (nombre) {
      const dept = this.departamentos.find(d => d.nombre === nombre);
      if (dept)
        codCtrl.setValue(dept.codigo);
    }
  });
}

您可能希望根据您的确切需求调整逻辑，但基本是您订阅部门控件的值更改并找到部门并使用该值设置代码控件的值。

推荐阅读