Custom component, manually set the validity


Hello, I have a custom component that I use in a form that implements ControlValueAccessor.

The component’s template is

    <ion-label floating>phone</ion-label>
    <ion-input  [(ngModel)]="telObj.number" (change)="setNumber($event)" type="text"></ion-input>                                    

    <ion-label>I use whatspapp </ion-label>
    <ion-checkbox [(ngModel)]="apps" (ionChange)="setApps()" color="primary" [checked]="apps"></ion-checkbox>

    <ion-label>I read sms</ion-label>
    <ion-checkbox [(ngModel)]="sms" (ionChange)="setSms()"  color="primary" [checked]="sms"></ion-checkbox>

The component with the form uses it as usual
<tel-input [apps]="true" [sms]="true" formControlName="telephone"></tel-input>

this component’s control validates the form

this.WizardOfferContactsPageForm ={

everything works well, but even when the form is invalid (becouse the number is not correct) the bottom border of the input is green becouse internally ion-input does not have a validator.

What would be the best way to act to have a consistent class applied to the ion-input ?