Angular 响应式表单从 AbstractControl 获取当前设置的验证规则

Question

我想要实现的是当给定控件具有验证规则 'required'.

时自动在输入上设置一个星号

组件 ts：

this.form = this.fb.group({
    name: ['', [Validators.required]]
});

组件模板：

<label>
    <span>Name</span>
    <input type="text" [appRequiredAsterisk]="form.get('name')" formControlName="name" id="name">
</label>

我的指令：

@Directive({
    selector: '[appRequiredAsterisk]'
})
export class RequiredAsteriskDirective implements OnInit {
    @Input() appRequiredAsterisk: AbstractControl;

    constructor(private el: ElementRef) { }

    ngOnInit(): void {
        // Append Asterisk here..
    }
}

我无法找到一种方法来查看是否在 AbstractControl appRequiredAsterisk 上设置了验证规则 'required'。我该怎么做？

Answer 1

类似于：-

let isRequired = appRequiredAsterisk.errors['required'];

if (isRequired) {
    //show asterix
}

编辑：

上面的问题显然是当错误消失时 asterix 也会消失。

找到这个，它实际上给了你验证器

let nameControlVald = this.form.controls['name'].validator('');
console.log(nameControlVald, "validators");

看来这是解决您的问题的最佳方法。所以将 this.form.controls['name'] 传递给指令并设置上面的内容然后检查 required 是否存在。

Angular 响应式表单从 AbstractControl 获取当前设置的验证规则

Angular reactive forms get the currently set validation rules from AbstractControl

validation

angular-directive

angular

angular-reactive-forms