2

Olá, Tenho um formulário 'Reactive Forms' aonde possui vários campos, (vários inputs), então decidi criar um component e rodar um ngFor no mesmo para reduzir o números de linhas...

Component html

<div *ngFor='let input of inputs' class="input-size-{{input.size}}" >
    <label>{{input.label}}</label>

    <input *ngIf='input.control == "input"' class="{{input.css}}" type="{{input.type}}" />

    <textarea *ngIf='input.control == "textarea"' class="{{input.css}}"></textarea>

    <select *ngIf='input.control == "select"' class="{{input.css}}">
        <option value="">:: Selecione ::</option>
    </select>
</div>

Component TS

/* Angular */
import { Component, Input} from "@angular/core";
import { FormularioModel } from "./vw.formulario.model";

@Component({
    selector: 'vw-input',
    templateUrl: './vw.input.html',
    styleUrls: ['./vw.input.scss']
})

export class VwInput{   
    @Input() inputs: FormularioModel[];
}

Component Model

export class FormularioModel {
    constructor(
        public control: string, 
        public label: string, 
        public value: any, 
        public formControlName: string, 
        public css: string, 
        public type: string, 
        public size: number){
    }
}

E implemento esse component da seguinte maneira...

Formulario html

<form [formGroup]='formulario' novalidate>
    <!-- Inputs gerados -->
    <!-- IMPLEMENTAÇÃO DO COMPONENT DE INPUT -->
    <vw-input [inputs]='inputs' ></vw-input>

    <!-- Footer -->
    <vw-formulario-footer></vw-formulario-footer>

    <div class="container-button">
        <button>Enviar</button>
    </div>
</form>

Formulario TS

/* Angular */
import { Component } from "@angular/core";
import { FormGroup, FormBuilder, Validators, AbstractControl, NgControlStatus, FormControl } from '@angular/forms';


import { FormularioModel } from "../../vw.shared/vw.input/vw.formulario.model";

@Component({
    selector: 'vw-formulario',
    templateUrl: './vw.formulario.html',
    styleUrls: ['vw.formulario.scss']
})

export class VwFormulario {

    formulario: FormGroup;
    caracteres_restantes: number;

    inputs: FormularioModel[] = [
        {control:'select', label: 'Motivo', value: '', formControlName: 'motivo', css: 'vw-input', type: 'text', size: 6},
        {control:'select', label: 'Assunto', value: '', formControlName: 'assunto', css: 'vw-input', type: 'text', size: 6},
        {control:'input', label: 'E-mail', value: '', formControlName: 'email', css: 'vw-input', type: 'text', size: 6},
        {control:'input', label: 'Nome', value: '', formControlName: 'nome', css: 'vw-input', type: 'text', size: 6},
        {control:'input', label: 'CPF', value: '', formControlName: 'cpf', css: 'vw-input', type: 'text', size: 6},
        {control:'input', label: 'Data Nascimento', value: '', formControlName: 'dt_nascimento', css: 'vw-input', type: 'text', size: 2},
        {control:'input', label: 'DDD', value: '', formControlName: 'ddd', css: 'vw-input', type: 'text', size: 1},
        {control:'input', label: 'Telefone', value: '', formControlName: 'telefone', css: 'vw-input', type: 'text', size: 3},
        {control:'input', label: 'Endereco', value: '', formControlName: 'endereco', css: 'vw-input', type: 'text', size: 6},
        {control:'input', label: 'Número', value: '', formControlName: 'numero', css: 'vw-input', type: 'text', size: 2},
        {control:'input', label: 'Complemento', value: '', formControlName: 'complemento', css: 'vw-input', type: 'text', size: 2},
        {control:'input', label: 'CEP', value: '', formControlName: 'cep', css: 'vw-input', type: 'text', size: 2},
        {control:'select', label: 'Estado', value: '', formControlName: 'estado', css: 'vw-input', type: 'text', size: 6},
        {control:'select', label: 'Cidade', value: '', formControlName: 'cidade', css: 'vw-input', type: 'text', size: 6},
        {control:'input', label: 'Bairro', value: '', formControlName: 'bairro', css: 'vw-input', type: 'text', size: 6},
        {control:'textarea', label: 'Mensagem', value: '', formControlName: 'mensagem', css: 'vw-input', type: 'text', size: 12}
    ]


    constructor(fb: FormBuilder){
        /* Grupo de formulario - Validações */
        this.formulario = fb.group({
            motivo: new FormControl('', [ Validators.required ]),
            assunto: new FormControl('', [ Validators.required ]),
            email: new FormControl('', [ Validators.required ]),
            nome: new FormControl('', [ Validators.required ]),
            cpf: new FormControl('', [ Validators.required ]),
            dt_nascimento: new FormControl('', [  ]),
            ddd: new FormControl('', [ Validators.required ]),
            telefone: new FormControl('', [ Validators.required ]),
            endereco: new FormControl('', [ Validators.required ]),
            numero: new FormControl('', [ Validators.required ]),
            complemento: new FormControl('', [  ]),
            cep: new FormControl('', [ Validators.required ]),
            estado: new FormControl('', [ Validators.required ]),
            cidade: new FormControl('', [ Validators.required ]),
            bairro: new FormControl('', [ Validators.required ]),
            mensagem: new FormControl('', [ Validators.required ]),
        });
    }
}

Porem dessa forma, meu formGroup não está fazendo associação com os inputs gerados pelo component. Gostaria de saber como faço essa ponte para obter os valores de cada input e realizar a validação pelo formGroup!

Agradeço desde já....

2 Respostas 2

0

Atribui em cada input o formControlName, que estava sendo passado apenas no model e não aplicado no Input. O input ficou da seguinte forma...

<input *ngIf='input.control == "input"' formControlName='{{input.formControlName}}' class="{{input.css}}" type="{{input.type}}" />

Alem disso, passei meu formGroup como parâmetro do component dos inputs para da seguinte forma:

<vw-input [formGroup]="formulario" [inputs]='inputs' ></vw-input>

Recebendo o mesmo no TS do component da seguinte forma:

@Input() formGroup: FormGroup;

E atribuindo ele a uma da seguinte forma:

<div [formGroup]="formGroup">
    <div *ngFor='let input of inputs' class="input-size-{{input.size}}" >
        <label>{{input.label}}</label>
        
        <input *ngIf='input.control == "input"' formControlName='{{input.formControlName}}' class="{{input.css}}" type="{{input.type}}" />
    </div>
</div>

Assim obtendo o resultado desejado...

0

Faltou informar o formControlName.

<input *ngIf='input.control == "input"' class="{{input.css}}" type="{{input.type}}" formControlName='{{ input.formControlName }}' />
1
  • Alem disso, é necessário seguir os passos da resposta abaixo. Commented 2/05/2018 às 12:51

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .