Form Reactive Custom Component

Question

I have a block of code and would like to turn it into a component

<div class="form-group">
  <label class="form-control-label" for="email"> EMAIL: <span class="star">*</span></label>
  <input class="form-control" type="email" id="email" formControlName="email"/>
  <app-show-errors [control]="cliente.controls.email"></app-show-errors>
</div>

component input-text

import {Component, Input} from '@angular/core';

@Component({
    selector: 'app-input-text',
    template: `
        <div class="form-group">
            <label class="form-control-label" for="{{name}}"> NOME: <span
                    class="star" *ngIf="control.errors?.required">*</span></label>
            <input type="text" class="form-control" formControlName="{{control}}" id="{{name}}" />
            <app-show-errors [control]="cliente.controls.email"></app-show-errors>
        </div>
    `
})
export class InputTextComponent {
    @Input() private nome: string;
    @Input() private control: AbstractControlDirective | AbstractControl;
}

component show-erros

import {Component, Input} from '@angular/core';
import {AbstractControl, AbstractControlDirective} from '@angular/forms';

@Component({
    selector: 'app-show-errors',
    template: `
        <small *ngIf="shouldShowErrors()" class="text-danger">
            <span *ngFor="let error of listOfErrors() | slice:0:1">{{error}}</span>
        </small>
    `
})
export class ShowErrorsComponent {

    private static readonly errorMessages = {
        'required': () => 'Este campo é requerido.',
        'email': () => 'Por favor, forneça um endereço de email válido.',
        'min': (params) => 'Por favor, forneça um valor maior ou igual a ' + params.requiredMin + '.',
        'minlength': (params) => 'Por favor, forneça ao menos ' + params.requiredLength + ' caracteres. ',
        'max': (params) => 'Por favor, forneça um valor menor ou igual a ' + params.requiredMax + '.',
        'maxlength': (params) => 'Por favor, forneça não mais que ' + params.requiredLength + ' caracteres.',
        'pattern': (params) => 'O formato fornecido é inválido. ' + params.requiredPattern
    };

    @Input() private control: AbstractControlDirective | AbstractControl;

    shouldShowErrors(): boolean {
        return this.control &&
            this.control.errors &&
            (this.control.dirty || this.control.touched);
    }

    listOfErrors(): string[] {
        return Object.keys(this.control.errors)
            .map(field => this.getMessage(field, this.control.errors[field]));
    }

    private getMessage(type: string, params: any) {
        return ShowErrorsComponent.errorMessages[type](params);
    }

}

after modified it had to be this way

I'm not able to pass the variables to app-input-text

another problem I have and that *ngIf="control.errors?.required" only appears when the required field is invalid it deferred to appear whenever there is one assigned to Validators.required

this.cliente = this.fb.group({
  fisica: this.fb.group({
                nome: [null, [Validators.required, Validators.maxLength(50)]],
  })
 });

ForestG · Accepted Answer · 2018-03-21 15:11:39Z

1

<label class="form-control-label" for="{{name}}"> NOME: <span

You have a typo in the "name" as

@Input() private nome: string;

answered Mar 21, 2018 at 15:11

ForestG

18.2k16 gold badges64 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Elvis Reis Over a year ago

even correcting the name of the variable I could not access it, I also need access to the formControlName

Collectives™ on Stack Overflow

Form Reactive Custom Component

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related