Question

我具有以下数据结构：

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。

Answer 1

订阅第一个表单控件的valueChanges，每当发出新的nombre时，在数组中找到相应的代码，并设置第二个表单控件的值：

this.formAviso.get('departamento').valueChanges.subscribe(
  newName => this.formAviso.get('codigoCiudad').setValue(this.findCodeFromName(newName))
);

Answer 2

您想要执行以下操作：

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

您可能想根据自己的实际需求调整逻辑，但基本原理是您订阅部门控件的值更改并找到部门，并使用该值设置代码控件的值。

Answer 3

您可以使用侦听一个字段的更改并更新其他字段：

departamentos = [
  {nombre: 'Amazonas', codigo: 41},
  {nombre: 'Ancash', codigo: 43},
  {nombre: 'Apurimac', codigo: 83}
];
formAviso: FormGroup;

private departamentosMap = this.departamentos.reduce((res, curr) => ({
  ...res,
  [curr.nombre]: curr.codigo
}), {});

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

  this.formAviso.get('departamento').valueChanges.subscribe(val => {
    this.formAviso.get('codigoCiudad').setValue(this.departamentosMap[val]);
  });
}

STACKBLITZ

Answer 4

为它们两个都输入[（ngModel）] =“ selectedValue”。
为它们两个都使用相同的[value] =“ departamento.codigo”值。

这两个步骤将解决您的问题。
```
tiny-example.fastq
```

形式相关的场反应形式Angular

4 个答案: