Question

我尝试创建一个自定义的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模板内的输入框。我如何实现这一目标？

我想要指定一个可选的输入变量，它接受一个验证器数组并动态设置它在输入元素上 - 不确定这是否是正确的方法？

非常感谢任何帮助。

Answer 1

我遇到了同样的问题！如果要动态添加所需的验证器，则可以像这样[readonly] =“ IsReadOnly”将其绑定到代码中的属性。

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

设置属性的功能

 IsReadOnly = false;
 IsRequired = false;

在我的示例中，我还创建了FormControl来将它们绑定到Control，并可以检查View是否全部有效。

HTML中的绑定

 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
  }

Angular：如何将验证指令应用于自定义模板的子级

1 个答案: