我需要根据
中的选择选项设置两个inout值我有一个带有选项的数组，当用户在输入中选择一个选项时，必须设置数组的另一个选项。 示例：当我选择选项“ Risco de alergias”时，一个输入已设置为“ Orientar o acientgia aempgias em caso de troca de coberturas e medicamentos”。和其他输入已设置为数组riscos的“ Pacientenãodevera apresentar alergias durante aexecuçãodo Tratamento”值
https://stackblitz.com/edit/angular-lii4rh
component.ts
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, FormControl } from '@angular/forms'
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
planoCuidadosForm: FormGroup;
risco: FormArray;
riscos = [
{
Risco: "Risco de alergias",
Cuidados:
"Orientar o paciente a sempre informar as alergias em caso de troca de coberturas e medicamentos.",
Resultado:
"Paciente não devera apresentar alergias durante a execução do tratamento"
},
{
Risco: "Risco de baixa autoestima ",
Cuidados:
"Promover conforto psicológico ao paciente visando a promoção da autoestima",
Resultado:
"Paciente não devera apresentar alterações da autoestima durante a execução do tratamento"
},
{
Risco: "Risco de distúrbio na identidade pessoal",
Cuidados:
"Auxiliar o paciente no processo de aceitação com as condições atuais",
Resultado:
"Paciente não devera apresentar disturbios na identidade pessoal durante a execução do tratamento"
}
];
constructor(
private datePipe: DatePipe,
private fb: FormBuilder,
) { }
ngOnInit() {
this.createFormPlanos();
}
createFormPlanos() {
this.planoCuidadosForm = this.fb.group({
planoDeCuidadosId: [null],
evolucao: [null],
riscos: this.buildRiscos(),
});
}
buildRiscos() {
return this.fb.array([
this.fb.group({
Risco: "",
Cuidados: "",
Resultado: ""
})
]);
}
addRiscos(): void {
this.risco = this.planoCuidadosForm.get("riscos") as FormArray;
this.risco.push(this.buildRiscos());
}
get getRiscos(): FormArray {
return this.planoCuidadosForm.get('riscos') as FormArray;
}
selRiscos(event: any) {
console.log("Risco: ", event.target.value)
const id = this.riscos.find(r => r.Risco == event.target.value);
console.log("Id: ", id);
(this.planoCuidadosForm.get(['riscos']) as FormArray)
.patchValue([{ Risco: id.Risco, Cuidados: id.Cuidados, Resultado: id.Resultado }]);
}
}
component.html
<form class="form-horizontal ml-2 mr-2 mt-2" [formGroup]="planoCuidadosForm" (ngSubmit)="onSubmitPlanoCuidados()">
<div class="form-row">
<div class="form-group col-md-12">
<label for="evolucao">Evolução:</label>
<textarea class="form-control" id="evolucao" rows="3" formControlName="evolucao"></textarea>
</div>
</div>
<div formArrayName="riscos" class="form-group col-md">
<table class="table table-hover">
<thead>
<tr class="bg-primary text-light">
<th style="width: 20%">Riscos</th>
<th style="width: 40%">Cuidados Relacionados aos riscos</th>
<th style="width: 30%">Resultado Esperado</th>
<th style="width: 5%">
<button type="button" class="btn btn-sm btn-primary flex-end mt-auto" (click)="addRiscos()">
<i class="fas fa-plus"></i>
</button>
</th>
</tr>
</thead>
<tbody>
<tr class="table-light" *ngFor=" let item of getRiscos.controls;let i = index;">
<td>
<select class="form-control" [formControlName]="i" (change)="selRiscos($event)">
<option [value]="null"> -- Selecione -- </option>
<option *ngFor="let opcao of riscos;let op = index;" value="riscos.Risco"> {{opcao.Risco }} </option>
</select>
</td>
<td>
<input type="text" class="form-control" formControlName="Cuidados" id="Cuidados" />
</td>
<td>
<input type="text" class="form-control" formControlName="Resultado" id="Resultado" />
</td>
</tr>
</tbody>
</table>
</div>
</form>
答案 0 :(得分：0)
您有一个FormGroup的FormArray，因此您需要使用
<!--see that use [formGroupName]="i" in the tag with *ngFor-->
<tr class="table-light" *ngFor=" let item of getRiscos.controls;let i = index;"
[formGroupName]="i">
<td>
<!--see that you use formControlName="Risco"-->
<select class="form-control" formControlName="Risco" (change)="selRiscos($event)">
<!--I prefer use [ngValue] over value-->
<option [ngValue]="null"> -- Selecione -- </option>
<option *ngFor="let opcao of riscos;let op = index;" [ngValue]="opcao.Risco">
{{opcao.Risco }}
</option>
</select>
</td>
...
</tr>
您的函数buildRisco应该返回一个formGroup，而不是FormArray，否则您的函数addRiscos（）没有意义-您正在推送FormArray
buildRiscos() {
return group=this.fb.group({
Risco: "",
Cuidados: "",
Resultado: ""
})
并在创建表单时使用
createFormPlanos() {
this.planoCuidadosForm = this.fb.group({
planoDeCuidadosId: [null],
evolucao: [null],
riscos: this.fb.array([this.buildRiscos()]), //<--here put the formArray
});
}
好吧，如果我们想控制“反应形式”中的cange，建议订阅.html中的valuesChanges（不使用（更改）），因此您的buildRiscos函数最终变为
buildRiscos() {
const group=this.fb.group({
Risco: "",
Cuidados: "",
Resultado: ""
})
group.get('Risco').valueChanges.subscribe(res=>{
const risco=this.riscos.find(r => r.Risco == res);
group.get('Cuidados').setValue(risco?risco.Cuidados:null)
group.get('Resultado').setValue(risco?risco.Resultado:null)
})
return group
}
注意：好的，（很长的回答很抱歉）如果您没有计划更改字段“ cuidados”和“ Resultado”，那么确实。您可以在选择的[ngValue] =“ opcao”中使用，而不使用其他输入{{risco.Cuidados}}和{{risco.Resultado}}
在这种情况下是FormControls的FormArray
this.form=this.fb.group({
riscos:this.fb.array([this.fb.control(null)])
})
因此，您使用[formControlName] =“ i”
<form *ngIf="form" [formGroup]="form">
<div formArrayName="riscos" class="form-group col-md">
<tr *ngFor="let item of getRiscos2.controls;let i=index">
<select class="form-control" [formControlName]="i" >
<option [ngValue]="null"> -- Selecione -- </option>
<option *ngFor="let opcao of riscos;let op = index;" [ngValue]="opcao"> {{opcao.Risco }} </option>
</select>
<td>{{getRiscos2.value[i]?.Cuidados}}</td>
<td>{{getRiscos2.value[i]?.Resultado}}</td>
</tr>
</div>
</form>
看到，整个对象都是[ngValue] =“ opcao”！多数民众赞成在允许我们使用getRiscos2.value [i] .Cuidados
我为your stackblitz提供了所有这些概念，希望对您有帮助