Cómo usar formularios reactivos dentro de ngFor

Revisamos completamente cada noticia en nuestro sitio web con la meta de enseñarte siempre información con la mayor veracidad y actual.

Solución:

Para resolver tu problema tienes que usar formArray como sigue:

En el componente:

export class UserComponent implements OnInit 
    usersForm: FormGroup;
    errorMessage : string;

    constructor(private formBuilder: FormBuilder) 

    ngOnInit() 
        this.usersForm= this.formBuilder.group(
            users: this.formBuilder.array([
                this.formBuilder.group(
                    address: [null, [Validators.required]],
                    phone: [null, [Validators.required]]
                )
            ])
        );
    

    initUserRow(): FormGroup 
        return this.formBuilder.group(
            address: [null, [Validators.required]],
            phone: [null, [Validators.required]],
        );
    

    addUserRow(): void 
        const usersArray=
            this.usersForm.controls['users'];
        usersArray.push(this.initUserRow());
    

    removeUserRow(rowIndex: number): void 
        const usersArray= this.usersForm.controls['users'];
        if (usersArray.length > 1) 
            usersArray.removeAt(rowIndex);
         else 
            this.errorMessage = 'You cannot delete this row! form should contain at least one row!';
            setTimeout(() => 
                this.errorMessage = null;
            , 4000);
        
    

En la vista:

    

        

        

            
Address
            
Phone
            
Action
        
        
        

        

            

                
                

                    Please enter address!
                
            

            

                
                

                    Please enter phone number!
                
            

            

                
                
            
        
        
    

¡Espero que ahora tu problema se resuelva!

Con los formularios reactivos, define la estructura de datos para contener los datos del formulario en su código. En tu ejemplo, lo defines con this.form. Pero la definición de su formulario solo tiene un control de dirección y un control de teléfono. Así que le has dicho a Angular que solo almacene una dirección y un teléfono.

Para permitir múltiples conjuntos de direcciones/teléfonos, necesita un FormArray como lo menciona @DavidZ. Como su nombre lo indica, un FormArray le permite tener un array de valores de forma.

En su ejemplo, su FormArray estaría compuesto por un FormGroup con una entrada para cada usuario. El FormGroup estaría compuesto por el conjunto de FormControls: la dirección y el teléfono.

Componente de formulario

Este ejemplo tiene un nombre y un array de direcciones, pero debería darle una idea general:

ngOnInit(): void 
    this.customerForm = this.fb.group(
        name: ['', [Validators.required, Validators.minLength(3)]],
        addresses: this.fb.array([this.buildAddress()])
    );


buildAddress(): FormGroup 
    return this.fb.group(
            addressType: 'home',
            street1: ['', Validators.required],
            street2: '',
            city: '',
            state: '',
            zip: ''
    );

Puede encontrar el código completo para esto aquí: https://github.com/DeborahK/Angular2-ReactiveForms/tree/master/Demo-Final-Updated

Reseñas y puntuaciones de la guía

---

---

Utiliza Nuestro Buscador