我想创建一个带有多个输入控件的自定义组件，我可以在其他组件表单中使用它，包括验证 . 我能找到的唯一例子展示了如何使用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) => { };
}
我正在使用“ControlValueAccessor”，以便我可以使用“[（ngModel）]”调用我的组件
<form #f="ngForm" name="f" novalidate>
<stationDefaultProperties name="stdProperties" [(ngModel)]="viewModel && viewModel.DefaultProperties"></stationDefaultProperties>
{{f.valid}} => is ALLWAYS TRUE
</form>
但问题是我不知道如何只为我的一个输入和两个minlength验证器实现所需的验证器 . 表单在启动时始终有效，但不应该因为必填字段中没有值 .
1 回答
我在这篇文章中找到了一个很棒的解决方案
Angular2 nested template driven form
并且有一个要点的链接，其中包含有关解决方案的详细信息
https://gist.github.com/jehugaleahsa/c40fb64d8613cfad8f1e1faa4c2a7e33
该解决方案不使用“ControlValueAccessor”，我认为它是一种非常酷的解决方案，可以解决我的问题，在自定义组件中有多个输入 .