Problem with form validation in template driven form

Question

I'm developing a web application using Angular 6. I would like to create some custom components that are inspired by the components of HTML input. For example:

CustomComponent.ts (typescript)

  @Component({
    selector: 'custom-component',
    templateUrl: './custom-component.html',
    providers: [
       {
         provide: NG_VALUE_ACCESSOR,
         multi: true,
         useExisting: forwardRef(() => InputTextComponent)
       }
    ]
    })
    export class CustomComponent {

      @Input() name: string;
      @Input() isRequired: boolean;
    }

CustomComponent.html (template)

<input type="text"
   [attr.name]="name"
   [required] = "isRequired"
/>

I have this problem. Suppose we use my component in this template:

<form #myForm="ngForm" ngNativeValidate>
  <custom-component
  name="myName"
  [isRequired] = true
  ngModel
  ></custom-component>
<button type="submit" (click)="method()">Click</button>

The required attribute it's initialized correctly in the <input type="text/> (wrapped component of <custom-component>). The problem is this (it's an Angular problem!): in this code of usage:

  method() {
    console.log(this.myForm.valid);
  }

The object myForm.valid (where myForm is associated with #myForm in the previous template) return always the true value, even if nothing is entered in the text field. This behavior is wrong: I would like this value to be false if I do not insert anything in the required field.

Jmsdb · Accepted Answer · 2018-11-13 18:00:00Z

1

To add validation to your custom input component you should add the following to your providers:

{
  provide: NG_VALIDATORS,
  useExisting: forwardRef(() => InputTextComponent),
  multi: true
}

You will have have to implement the default method, within your InputTextComponent:

validate(control: AbstractControl): ValidationErrors | null {
    return null;
}

If you correctly update a property within your component called value using the writeValue() method you implemented with your NG_VALUE_ACCESSOR and then ensure to call (you can do this by implementing a change event on your default input):

this.propagateChange(this.value);

Finally change your isRequired input to the default required property.

 @Input() required: boolean;

Your NgModel should now correctly update.

Edit: To avoid using required (however this is the correct way). Within the validation method place the following code:

validate(control: AbstractControl): ValidationErrors | null {
    return this.isRequired && this.value.length === 0 : { required: true } : null;
}

What is happening is when Angular runs its own validation it calls this method. When this method returns anything but null, the object is added to the errors property within the FormControl & NgModel.

This is a huge topic and there are some great articles properly explaining it all. However, as asked, this should solve it.

edited Nov 13, 2018 at 18:00

answered Nov 13, 2018 at 16:01

Jmsdb

5353 silver badges9 bronze badges

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

4 Comments

claudioz Over a year ago

Thanks, I did everything, except the last step. Why I need to edit the input name (@Input() required: boolean;) and how is this reflected in the template of my custom component?

claudioz Over a year ago

Ok it works. But what if I wanted to keep the isRequired property?

claudioz Over a year ago

I would like to avoid using the "required" property from the caller... I preder use the custom property "isRequired" from the caller

Jmsdb Over a year ago

When using NgModel and ControlValueAccessor, you are informing Angular that you will be treating this component as a default HTML input. You can use isRequired, however, your input element is not the input within the component but your InputTextComponent itself. I will update my answer to include a workaround, however, I would advise against it. That is why using require as you would with a real input is advised.

Slobodan Gajić · Accepted Answer · 2018-11-13 15:58:55Z

0

You should check is form dirty and is it valid. So both needs to be true. Otherwise it shows it hasn't been changed.

answered Nov 13, 2018 at 15:58

Slobodan Gajić

1621 silver badge12 bronze badges

Collectives™ on Stack Overflow

Problem with form validation in template driven form

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related