Angular 通用自定義驗證組件

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