Question

我有一些类似于以下所示的Angular来验证输入。我正在重复很多此代码（只是交换模型/属性）。

我想尝试将其移动到一个单独的组件中，我可以引用该变量并将其传递给它。

执行此操作的最佳方法是什么？我不确定如何在模型本身中传递它并处理通用属性。

代码：

    <div class="form-group required">
                    <label class="control-label" translate for="name">Name</label>
                    <input [(ngModel)]="connector.name" #connectorName="ngModel" id="name" name="name" type="text" class="form-control" required [class.is-invalid]="connectorName.invalid && (connectorName.dirty || connectorName.touched)">
                </div>

                <div *ngIf="connectorName.invalid && (connectorName.dirty || connectorName.touched)"
                     class="text-danger">
                    <div *ngIf="connectorName.errors.required" translate="Validation.RequiredField" [translateParams]="{Field: 'Name' | translate}">
                    </div>
                </div>

尝试创建通用组件

import { Component, Input, ViewChild } from "@angular/core";

@Component({
    selector: 'validation-display',
    templateUrl: './validation-display.component.html',
})
export class ValidationDisplayComponent {

    @Input()
    translateText: string;

    @Input()
    @ViewChild('element') input;
}

Answer 1

为此，请使用所谓的“自定义表单组件”。

这是实现ControlValueAccessor的组件。

它将以templateDriven和reactForm形式工作。

您可以在这里找到更多信息：https://almerosteyn.com/2016/04/linkup-custom-control-to-ngcontrol-ngmodel

角度通用自定义验证组件

1 个答案: