Angular

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

与您以编程方式访问的方式相同这个。 formulario.get("capacidad") // 表单控件

<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>
```

Answer 2

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

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

STACKBLITZ

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

Angular - 如何根据每个值更改 FormBuilder 中动态创建的输入的样式？

Angular - How to change Style on a dynamically created input in a FormBuilder depending on each value?

styles

input

formbuilder