Angular-각 값에 따라 FormBuilder에서 동적으로 생성 된 입력에서 스타일을 변경하는 방법은 무엇입니까?

독일 사람

동적으로 생성 된 입력 (버튼을 눌렀을 때)에 삽입 된 텍스트를 빨간색으로 만들려고하는데 제대로 이해할 수 없습니다. 이 경우 입력 값에 액세스하는 방법을 모르겠습니다. 입력 한 숫자가 폼에 입력 된 다른 숫자보다 크면 색상이 빨간색이되는 조건에 따라 텍스트를 변경하고 싶습니다.

이것은 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;
  }
AJT82

다른 답변과 마찬가지로 루프에서 특정 양식 컨트롤의 값을 확인하십시오. 다음과 같이 할 수 있습니다.

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

스택 블릿츠

편집 :하지만 당신은 또한 할 수 pesos.controls[i].controls.peso.value있지만 사용 at하고 싶습니다 get.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

Related 관련 기사

뜨겁다태그

보관