angular 具有多个输入和验证的组件（必需）

Question

我想创建一个带有多个输入控件的自定义组件，我可以在其他组件表单中使用它，包括验证。我能找到的唯一示例展示了如何使用一个输入和一个自定义验证器创建一个简单的组件。但是我无法创建具有两个或多个输入的组件，例如

@Component({
    selector: 'stationDefaultProperties',
    template: '<div><span>Name:</span>
      <input [(ngModel)]="values.Name" (change)="onChanges()" name="name"  required maxlength="200" minlength="2" type="text">
      <span>Beschreibung:</span>
      <textarea [(ngModel)]="values.Beschreibung" name="beschreibung" minlength="4" type="text" rows="3"></textarea></div>',
    providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => StationDefaultPropertiesComponent),
            multi: true
        }
    ]
})
export class StationDefaultPropertiesComponent implements ControlValueAccessor {
    @ViewChild('cF') public userFrm: NgForm;

    public values: my.Container.IStationDefaultProperties = {
        Aktiv: false,
        Beschreibung: "",
        Name: "",
        StationId: 0
    };

    constructor() { }

    public writeValue(value: my.Container.IStationDefaultProperties): void {
        if (value) {
            this.values = value;
            console.log(value);
        }
    }

    public onChanges(): void {
        this.propagateChange(this.values);
    }

    public registerOnChange(fn): void {
        this.propagateChange = fn;
    }

    public registerOnTouched(fn): void { }

    // the method set in registerOnChange to emit changes back to the form
    private propagateChange = (_: any) => { };
}

我正在使用 "ControlValueAccessor" 以便我可以使用“[(ngModel)]”调用我的组件

<form #f="ngForm" name="f" novalidate>
<stationDefaultProperties name="stdProperties" [(ngModel)]="viewModel && viewModel.DefaultProperties"></stationDefaultProperties>
 {{f.valid}} => is ALLWAYS TRUE
</form>

但问题是我不知道如何只为我的一个输入实现所需的验证器，并为它们两个实现最小长度验证器。该表格在开始时始终有效，但它不应该因为必填字段中没有值。

Answer 1

我在这个 post

中找到了一个很好的解决方案

Angular2 nested template driven form

并且有一个 link 要点，其中包含有关解决方案的详细信息

https://gist.github.com/jehugaleahsa/c40fb64d8613cfad8f1e1faa4c2a7e33

该解决方案不使用 "ControlValueAccessor"，我认为它是解决我的问题的一个非常酷的解决方案，在自定义组件中有多个输入。

angular 具有多个输入和验证的组件（必需）

angular component with multiple inputs and validation (required)

angular

angular-components

angular-validation