如何使用 Angular 指令在 HTML 文本框元素内设置默认值。请参考以下代码

Question

下面的代码可以很好地更改 "div , heading tags" 的 innerHTML 但不适用于文本框

@Component({
  selector: 'app-root',
  template: ` <h3 appNamevalidation >Angular 7 Template-Driven Form Validation</h3>
  <input type = "text" [(ngModel)]="model.firstName" #firstName="ngModel" required appNamevalidation 
  />`
})

@Directive({
  selector: '[appNamevalidation]'
})

export class NamevalidationDirective {
  constructor(private elem: ElementRef) { }

  ngOnInit() {
    console.log(' inside ngOninIt directive hook');
    this.elem.nativeElement.value = "Changed by directive inside NG ONIT";
    this.elem.nativeElement.innerHTML = "Changed by directive inside NG ONIT";
  }
}

Answer 1

指令的 ngOnInit 挂钩在 ngModel 绑定到输入之前执行。您可以使用另一个生命周期挂钩，例如 ngAfterViewChecked 使其工作：

export class NamevalidationDirective {
    constructor(private elem: ElementRef) { }

    ngAfterViewChecked() {
        this.elem.nativeElement.value = "Changed by directive inside NG ONIT";
        this.elem.nativeElement.innerHTML = "Changed by directive inside NG ONIT";
    } 
}

如何使用 Angular 指令在 HTML 文本框元素内设置默认值。请参考以下代码

How to set the default value inside a HTML Text box element using Angular Directive . Please refer the below code

javascript

html

angular

angular-directive

dom-manipulation