Question

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

@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) => { };
}

我正在使用＆＃34; ControlValueAccessor＆＃34;这样我就可以用＆＃34; [（ngModel）]＆＃34;

调用我的组件

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

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

Answer 1

我在这篇文章中找到了一个很棒的解决方案

Angular2 nested template driven form

并且有一个指向gist的链接，其中包含有关解决方案的详细信息

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

解决方案不使用＆＃34; ControlValueAccessor＆＃34;对于我的问题，我认为这是一个非常酷的解决方案，在自定义组件中有多个输入。

具有多个输入和验证的角度分量（必需）

1 个答案: