角度 - 如何根据每个值更改表单构建器中动态创建的输入的样式?

Question

我试图将插入动态创建的输入中的文本变为红色(按下按钮的数量(，但我无法正确处理。在这种情况下，我不知道如何访问输入的值。 我想根据以下条件更改文本：如果插入的数字大于表单中的其他输入，则其颜色变为红色。

这是 html

<form [formGroup]="formulario">
<label>
Capacidad
<input type="text" formControlName="capacidad" />
</label>
<label>
Max. Casas
<input type="text" formControlName="maxcasas" />
</label>
<div formArrayName="pesos">
<button (click)="addPeso()">Añadir peso</button>
<button (click)="deleteAllPesos()">Resetear</button>
<div *ngFor="let peso of pesos.controls; let i = index" [formGroupName]="i">
<label>
Peso:
<input [style.color]="<<<<value bigger than formulario.capacidad ? "red" ; "black">>>>> type="number"  formControlName="peso" />
</label>
<label>
Nombre:
<input type="text" formControlName="nombre" type="text" />
</label>
<button (click)="deletePeso(i)">Borrar</button>
</div>
</div>
</form>

这是 ts 的相关部分

public formulario = this.fb.group({
capacidad: ["5"],
maxcasas: ["3"],
pesos: this.fb.array([
this.fb.group({
peso: this.fb.control(""),
nombre: this.fb.control("")
})
])
});
get pesos() {
return this.formulario.get("pesos") as FormArray;
}

Answer 1

与其他答案类似，检查循环中特定表单控件的值，可以通过以下方式进行操作：

[style.color]="pesos.at(i).get('peso').value > formulario.get('capacidad').value ? 'red' : 'black'"

斯塔克闪电战

编辑：但你也可以做pesos.controls[i].controls.peso.value，但我喜欢使用at和get。

Answer 2

以编程方式访问的方式相同 这。formulario.get("capacidad"(//FormControl

<form [formGroup]="formulario">
<label>
Capacidad
<input type="text" formControlName="capacidad" />
</label>
<label>
Max. Casas
<input type="text" formControlName="maxcasas" />
</label>
<div formArrayName="pesos">
<button (click)="addPeso()">Añadir peso</button>
<button (click)="deleteAllPesos()">Resetear</button>
<div *ngFor="let peso of pesos.controls; let i = index" [formGroupName]="i">
<label>
Peso:
<input [style.color]="formulario.get('pesos').get(i).get('peso').value > formulario.get("capacidad").value ? "red" ; "black" type="number"  formControlName="peso" />
</label>
<label>
Nombre:
<input type="text" formControlName="nombre" type="text" />
</label>
<button (click)="deletePeso(i)">Borrar</button>
</div>
</div>
</form>
```