Entrar Ainda não tem acesso?
3
respostas

Validator mostrando o Label através de Formbuilder

Referente ao curso Angular 2: webapps ainda mais poderosas parte 2

por Isaac
| 44.6k xp | 17 posts
Desenvolvedor

Criei um Formbuilder para tratar a validação dos campos.

aba.component.ts

abaForm: FormGroup;

  ngOnInit() {

   this.aba1Form = this.formBuilder.group({
    formula: [null, Validators.required]
   });

parte da aba.component.html

<div class="col-md-6">
            <div class="form-group">
                <label for="formula">Fórmula de Cálculo</label>
                <textarea class="form-control" id="formula" rows="6" formControlName="formula" [ngModel]="c.formula" required></textarea>
            </div>
        </div>

parent.component.ts

invalido:any= true;
 camposInvalidos = new Array();



 Object.keys(this.aba.abaForm.controls).forEach(key => {
      if(!this.aba.abaForm.get(key).valid){
        this.camposInvalidos.push(key);
        console.log(key);
      }
    });

no console.log me retorna formula que é o nome que setei no formControlName.

Preciso retornar o valor do que é "Fórmula de Cálculo"

Tenho no componente pai um for que vai retornar todos os erros.

parent.component.html

<section class="panel" *ngIf="!invalido">
                        <div class="panel-body btn-gap">
                            <div class="alert alert-block alert-danger fade in" *ngFor="let msg of camposInvalidos">
                                    <button data-dismiss="alert" class="close close-sm" type="button">
                                    <i class="fa fa-times"></i>
                                    </button>
                                    Campo <strong> {{ msg }} </strong> não deve ser nulo
                            </div>
                        </div>
                    </section>

Qual seria uma solução para isto?

3 respostas
por Mario Souto
| 377.3k xp | 735 posts
Alura Scuba Team Instrutor e Desenvolvedor

Faala Isaac, tudo bom? Não consegui entender bem o erro que aconteceu, poderia compartihar seu código pelo github e mandar o link por aqui? :)

por Isaac
| 44.6k xp | 17 posts
Desenvolvedor

Na verdade não é um erro, até consegui resolver de outra forma. o que eu queria era recuperar o conteúdo da tag usando o form reactive para mostrar a mensagem mais dinâmica. Mas eu criei um array com todas mensagens, assim pego o campo do form que é uma chave para o meu array de mensagem.

 Object.keys(this.aba.abaForm.controls).forEach(key => {
      if(!this.aba.abaForm.get(key).valid){
        var invalid = this.camposInvalidos.indexOf(key, 0);
        if (invalid > -1) {

        } else {
          this.msgInvalidos.push(this.msg[key]);
por Mario Souto
| 377.3k xp | 735 posts
Alura Scuba Team Instrutor e Desenvolvedor

Bom Isaac,

Dei uma olhada e não consegui achar algo que poderia ajudar nesse caso, acredito que sua solução tenha sido uma alternativa legal para esse problema :)

Inclusive seria legal marcar como solução para outras pessoas poderem se beneficiar também.