Как я могу добавить код html в поле ввода из пользовательской директивы в angular - PullRequest
Новая
       43

Как я могу добавить код html в поле ввода из пользовательской директивы в angular

0 голосов
/ 09 марта 2020

Я пытаюсь показать ошибки для полей в angular формах:

Я могу получить ошибку, когда мы вносим изменения в поле формы, и распечатать ее в консоли, но я не возможность добавить, что в 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>

здесь validate является пользовательской директивой, и нет, я хочу получить вот так: 

<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>

и мой файл пользовательских директив: 

@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;



    }
}

Я хотел бы добавить this.message в поле ввода выше.

...