Angular - Как изменить стиль динамически созданного ввода в FormBuilder в зависимости от каждого значения? - PullRequest
Новая
       8

Angular - Как изменить стиль динамически созданного ввода в FormBuilder в зависимости от каждого значения?

1 голос
/ 20 января 2020

Я пытаюсь сделать красный текст, вставленный в динамически создаваемый ввод (столько, сколько нажата кнопка), но я не могу сделать это правильно. Я не знаю, как получить доступ к значению ввода в этом случае. Я хочу изменить текст в зависимости от условия, что, если введенный номер больше, чем другой ввод в форме, его цвет становится красным.

Это 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>

Это соответствующая часть ТС 

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

Ответы [ 2 ]

0 голосов
/ 20 января 2020

Аналогично другому ответу, проверьте значение элемента управления формы c в l oop, вы можете сделать это следующим образом: 

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

STACKBLITZ

РЕДАКТИРОВАТЬ: Но вы также можете сделать pesos.controls[i].controls.peso.value, но мне нравится использовать at и get.

0 голосов
/ 20 января 2020

Так же, как вы получаете программный доступ к этому. formulario.get ("емкость") // 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>
```
...