How can i Append a html code to the input field from custom directive in angular

Question

i am trying to show errors for the fields in angular forms:

i am able to get the error when we make a changes in the form field and print it in the console but i am not able to append that into the html:

app.component.html:

 <div class="form-group">
    <div class="col-sm-12">
              <label for="email" class="control-label">Email</label>
              <input type="text" id="email" class="form-control" formControlName="email" 
              validate
              [form_name] = "form"
              key = "email"
              >
     </div>
 </div>

here validate is the custom directive and no i want to get like this:

<div class="form-group">
    <div class="col-sm-12">
              <label for="email" class="control-label">Email</label>
              <input type="text" id="email" class="form-control" formControlName="email" 
              validate
              [form_name] = "form"
              key = "email"
              >
              <small class="invalid-feedback">Please Enter The Above Field</small>

     </div>
</div>

and my custom directive file is:

@Directive({
    selector: '[validate]',
    host: {"(input)": 'onInputChange($event)'}
})

export class fieldValidate{
    form_name;
    key;
    key_Error;
    count :number=0;
    message :string;
    @Input('form_name') 
    set _form_name(data :any){
        this.form_name =data;
    }

    @Input('key') 
    set _key(data :any){
        this.key=data;
    }
    @Output('err_msg') err_msg = new EventEmitter();

    Error_Messages ={
        'email' : " Format is invalid",
        'required' :" is Required",
        'maxlength' : " has Max Length"
    }



    constructor(
        private el :ElementRef,
        private renderer :Renderer2, 
        ){}


    onInputChange($event){
        if(this.form_name.get(this.key) instanceof FormControl){
            const controlErrors : ValidationErrors = this.form_name.get(this.key).errors;
            if(controlErrors != null){
                Object.keys(controlErrors).forEach(keyErrors=>{
                    console.log("Key is : " + this.key + " Key Error: " + keyErrors);
                    this.key_Error=keyErrors;
                })
            }
        }


        if(this.key_Error){
            this.renderer.addClass(this.el.nativeElement,"is-invalid");
            this.count++;
            console.log(this.key_Error + " "+this.count);
            this.message = <string> this.key;
            this.message = this.message + this.Error_Messages[this.key_Error];
            console.log(this.message);
            //this.err_msg.emit(this.message);


        }
        else {
            this.renderer.removeClass(this.el.nativeElement,"is-invalid");
        }
        this.key_Error=null;



    }
}

i would like to append this.message to the above input field.