Question

当给定控件具有所需的验证规则时，我尝试实现的功能会自动在输入上设置星号。

组件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..
    }
}

我找不到一种方法来查看验证规则是否需要＆＃39;在AbstractControl appRequiredAsterisk上设置。我怎么能这样做？

Answer 1

类似的东西： -

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

if (isRequired) {
    //show asterix
}

修改

上面的问题是，当错误消失时，asterix就会消失。

找到这个here，它实际上为您提供了验证器

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

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

Angular反应形式从AbstractControl获取当前设置的验证规则

1 个答案: