0

tengo un formulario reactivo que utiliza el FormBuilder para manejar los campos pero cuando quiero cargar por defecto un array simple de string en un select option no se muestra en el html. Así declaro en Typescript

 constructor(private fb: FormBuilder) {
  }
 forma: FormGroup;
  ngOnInit() {
    this.forma = this.fb.group({
fecha: ['', Validators.required],
      lstFormaPago: [['Efectivo', 'Cheque', 'Tarjeta'], Validators.required]
 });
  }

Esta es mi pagina de formulario

    <form autocomplete="off" [formGroup]="forma" (ngSubmit)="guardar()" >
 <div class="form-group row">
            <label class="col-md-3 col-form-label">Fecha</label>
            <div class="col-md-3">
              <input class="form-control"
                     type="date"
                     placeholder="01/01/2020"
                     formControlName="fecha" >
            </div>
          </div>
 <div class="form-group row">
<label class="col-md-2 col-form-label">FormaPago</label>
            <div class="col-md-4">
<select formControlName="lstFormaPago" class="form-control">
                <option *ngFor="let form of lstFormaPago">{{form}}</option>// <- No muestra valores
              </select>
</div>
</div> 
</div>
</form>

He intentado pasar en una variable el array desde typescript, quintando validators, reemplzando formControlName por ng-model="lstFormaPago" y nada

1 respuesta 1

1

Estás haciendo mal las cosas, en primera estás inicializando lstFormaPago como un arreglo, esto es el valor que va a tener tu select mas no las opciones del select, en segunda el lstFormaPagoque usas en el *ngForno existe a menos que no hayas mostrado tu parte del código. La solucion es declarar una variable que contenga tu arreglo de valores para el select y una vez que se seleccione algo, se hará la interpolacion en automatico al form control lstFormaPago.

        constructor(private fb: FormBuilder) {}
        forma: FormGroup;
        listaFormaPago = ['Efectivo', 'Cheque', 'Tarjeta'];

        ngOnInit() {
            this.forma = this.fb.group({
                  fecha: ['', Validators.required],
                  formaPago: ['', Validators.required]
            });
        }

Para este caso el form control lo inicializo con un valor vacio, por lo que si no se selecciona algo se dispara el validador de required. Está en tu decición poner un option vació al select para este caso.

       <form autocomplete="off" [formGroup]="forma" (ngSubmit)="guardar()" >
           <div class="form-group row">
               <label class="col-md-3 col-form-label">Fecha</label>
               <div class="col-md-3">
                   <input class="form-control" type="date"
                          placeholder="01/01/2020"
                          formControlName="fecha" >
               </div>
           </div>
           <div class="form-group row">
               <label class="col-md-2 col-form-label">FormaPago</label>
               <div class="col-md-4">
                   <select formControlName="formaPago" class="form-control">
                       <option value="">- Seleccione -</option>
                       <option *ngFor="let form of listaFormaPago" [value]="form">{{form}}</option>// <- No muestra valores
                   </select>
               </div>
           </div> 
         </div>
     </form>
1
  • te agradezco @Alberto Rojas, me estaba confundiendo por las diferentes formas de cargar las <options> ,dado que para campos tipo text si funciona poner directo el valor en la construción del fb.group() el 10 dic. 2020 a las 15:03

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.