Odtnhj

I'm developing a web application using Angular 6. I have a question: 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.
Anyone can help me?

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.

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