表单相关字段反应表单Angular答案

【问题标题】：Form dependent field reactive form Angular表单相关字段反应表单Angular
【发布时间】：2020-01-01 02:13:11
【问题描述】：

我有以下数据结构：

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。

【问题讨论】：

事后可以改吗？还是它们总是必须匹配值？
用两个不同的选择框来选择一个部门有什么意义？
@bryan60 是的，在departamento中选择后应该可以更改它们
好吧，为了非常清楚，我可以在选择部门后选择不同的代码而不更改部门/
@JBNizet 的重点是，在一个选择中我想选择部门，而在另一个选择中其各自的codigo

标签： angular angular-reactive-forms

【解决方案1】：

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

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

【讨论】：

谢谢，我假设finCodeFromName函数应该是如何找到相关codigo的逻辑。

【解决方案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);
    }
  });
}

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

【讨论】：

这很完美，只是一个错字，在第二个if 我不得不添加括号{ }
单行 if 语句不需要括号

【解决方案3】：

将 [(ngModel)]="selectedValue" 放入它们。

对它们使用相同的 [value]="departamento.codigo" 值。

这两步将解决您的问题。

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

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

【讨论】：

谢谢，细节是我使用formControlName 的反应形式我认为你不能使用ngModel 或者如果？
对不起，我改变了它。你可以使用表单控件名称。无需删除。我试过它与表单控件名称一起使用。所以你可以使用它。

【解决方案4】：

你可以监听一个字段的变化，然后更新另一个字段：

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

【讨论】：