Angular - [FormControl]

[FormControl]

Publicado por Pedro (1 intervención) el 08/09/2020 20:56:59

buen día a tod@s.

estoy tratando de hacer un formulario en el cual yo tengo N cantidad de tarifas que debo presentar en pantalla, las tarifas se han ido incrementando con el paso del tiempo, por lo que no puedo dejar los FormControl fijos.

Necesito iterar una gama de tarifas de un formArray y en el HTML poner dinamicamente el NAME correspondiente de cada FormControl iterado

getControls(formArray: AbstractControl): FormControl[] {

    return <FormControl[]>(<FormArray>formArray).controls

<tr *ngFor="let form of getControls(DatosTopesFormCtrl); let i = index; let ultimo = last;">

    <td>

        <mat-form-field class="example-full-width" style="width: 50px;">

            <input matInput placeholder="3.5 Toneladas A" [formControl]="form.get('7A')" type="text" (keypress)="numberOnly($event)" >

            <mat-error *ngIf="form.get('7A').errors && form.get('7A').errors.pattern">

                Formato de importe no valido

            </mat-error>

        </mat-form-field>

    <td>

</tr>

lo que busco es no hacer tantas veces los TDs y al iterar mi formArray poner el Key o no se cual campo, en lugar del 7A por ejemplo [formControl]="form.get('7A')"

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 4

Val: 11

[FormControl]

Publicado por Enrique (8 intervenciones) el 18/09/2020 23:29:42

estas cometiendo errores de sintaxis, en angular todo input que se quiera validar o manipular dentro de la etiqueta form debera tene el atributo name y id y estos deberán ser unicos lo que yo haria es por ejemplo es n cantidad de input seteado desde un string array

//conponente

inputs:Array<string> =["input1","input2","input3",...];

//html

<form (ngSubmit)="submit(f)" #f="ngForm" style="width: 100%;" autocomplete="off">

<mat-form-field class="material-control" *ngFor="let input from inputs">

<mat-label>{{input}}</mat-label>

<input matInput id="{{input}}" name="{{input}}" required>

</mat-form-field>

</form>

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar