0

我正在尝试创建一个自定义 Angular 组件，它将现有的 Form 组件包装到一个组件中，例如，我没有一个标签、文本框、验证错误跨度，而是有一个组件可以将这三个组件一起呈现并自动管理验证状态。例如，当字段验证通过时，错误消息和 css 将被清除。所有这些都包含在名为 my-text-component 的组件中：

<div class="form-group" [ngClass]="{ 'has-error': (invalid | async), 'form-group--disabled': (disabled) }">
    <label class="input-label" [attr.for]="identifier">{{ label }}
        <!--Removed for brevity -->
    </label>
    <div #inputGroup class="input-group">
        <span *ngIf="icon" class="input-group-addon">
             <span svg-icon ....
            </span>
        </span>
        <input #formControl (keyup)="onKeyUp($event)" (keydown)="onKeyDown($event)"
               type="{{ type }}"
               class="form-control input-sm"
               placeholder="{{ placeholder }}"
               [id]="identifier"
               [name]="name"
               [disabled]="disabled"

               //How do I add custom validators here dynamically?
        />
        <!-- Other customisations -->
    </div>    
</div>

在我的组件类中：

@Component ({
    selector: 'custom-text',
    templateUrl: 'custom-text.component.html',
    encapsulation: ViewEncapsulation.None,

})
export class CustomTextComponent implements ....{

    @Input()
    @Optional()
    customValidators: Array<any>

    constructor(renderer: Renderer, renderer2: Renderer2) {
        //Initializations
    }

    //How do I access validators set on <custom-text> and apply them dynamically?
    onInit() {

    }

}

我想做的是在这个组件上应用内置的角度验证器，并以某种方式将它们连接到输入元素，例如，做这样的事情：

<custom-text required minlength="4" pattern="some pattern">
</custom-text>

应该应用验证器required，minlength并pattern应用于模板内的输入框custom-text。我如何实现这一目标？

我正在考虑指定一个可选的输入变量，该变量采用一组验证器并动态地将其设置在输入元素上——但不确定这是否是正确的方法？

任何帮助将不胜感激。

4

1 回答 1

0

我有同样的问题！如果您想动态添加所需的验证器，您可以像这样 [readonly]="IsReadOnly" 将它们绑定到代码中的属性。

这里是示例：Typescript 类中的属性：

 IsReadOnly = false;
 IsRequired = false;

设置属性的功能

 public setField(field: LayoutFieldVO): FormControl {
    this.field = field;
    this.IsReadOnly = field.readOnly;
    this.IsRequired = field.required;
    this.MinLength = field.minLength;
    if(this.IsRequired)
      this.lfvalidation = new FormControl('', [Validators.required]);
    else
      this.lfvalidation = new FormControl('', []);
    return this.lfvalidation
  }

在我的示例中，我还创建了 FormControl 以将它们绑定到控件，并且我可以检查视图是否都有效。

HTML中的绑定

<input matInput [(ngModel)]=model[bindinginfo] [readonly]="IsReadOnly" [required]="IsRequired" [formControl]="lfvalidation">
于 2018-10-30T13:46:15.503 回答