我试图为所有"Required"属性设置为True的输入字段显示一个明确的"Required"占位符文本.
所以基本上是一样的
<mat-form-field>
<input formControlName="fieldName" matInput required="true" placeholder="Required">
</mat-form-field>
而是以编程方式用于所有必填字段.表单域在组件初始化时根据各种条件设置为必填状态.
如果有一种方法可以为ANGLE应用程序的所有组件/页面做到这一点，而不仅仅是一个组件，那就更好了！
要将指令应用于几个元素，我们使用 Select 符
在本例中， Select 器是具有属性"formControl"或属性"formControlName"的标记"Input".
import {
Directive,
ElementRef,
} from '@angular/core';
import { NgControl, Validators } from '@angular/forms';
@Directive({
selector: 'input[formControlName],input[formControl]',
standalone: true,
})
export class AddPlaceholderDirective {
constructor(private control: NgControl, private element: ElementRef) {}
ngAfterViewInit() {
if (this.control.control?.hasValidator(Validators.required) &&
!this.element.nativeElement.placeholder) {
this.element.nativeElement.placeholder = 'required';
}
}
}
Update一个简短的解释:
指令可以是" struct 指令"和"attributes directives".
属性指令为我们的htmlElement甚至我们的组件提供了新的特征，但如何工作呢？
当我们有一个像[myDirective]这样的 Select 器时，所有具有这个"属性"的HTMLElement都会使用新的特性进行改进.(这就是命名ATTRIBUTE指令的原因)
例如，当有
@Directive({
selector: '[myDirective]',
standalone: true,
})
export class MyDirective {
constructor(private element: ElementRef) {
console.log("I'm a super div")
}
}
//and write
<div myDirective>Hello</div>
这个div不是一个简单的div，否则就是一个"超级div"(是的，只在控制台中说"我是一个超级div"，但让"一些不同的东西，一个简单的div")
struct 指令有一个" Select 符"，通常是一个介于[``]之间的简单字符串，但 Select 符可以不同，请参见the docs
因此，像input[formControl]这样的 Select 器为属性为"formControl"的所有输入赋予新的超能力，而像input[type="radio"]这样的 Select 器为属性类型为"Radio"的所有输入赋予新的超能力.
我知道formControl是另一个指令，但它也是一个属性.
注意:"属性指令"的好处是，当应用于HTMLElement或组件时，我们可以在构造函数中获得htmlElement或组件，这就是我们可以使用
constructor(private elementRef:ElementRef,control:NgControl){}
我们在所有属性指令中都有"elementRef"，它是我们自己的"htmlElement"，我们在其中添加属性.
"ngControl"是因为我们有一个带有FormControl或FormControlName的ngModel的输入