对作为组件的反应式表单控件使用验证

Question

如何在FormBuilder中对此组件运行自定义验证？

例如，当用户从下拉列表onClickItem(item)中选择项目时如何对主表单组件中选定的item运行验证功能？

主表单组件中的FormBuilder：

this.itemForm = this.fb.group({
name: ['', [Validators.required, Validators.minLength(3)]],
description: ['', [Validators.required, Validators.minLength(10)]],
itemName: [] // run validation on this component
});

然后我可以在itemName上使用这样的验证器：itemName: [, MyValidator.itemNotUsed],

模板：

<app-dropdown-select formControlName="itemName"
[dropdownItems]="items">
</app-dropdown-select>

下拉选择组件：

@Component({
selector: 'app-dropdown-select',
templateUrl: './dropdown-select.component.html',
styleUrls: ['./dropdown-select.component.scss'],
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => DropdownSelectComponent),
multi: true
}
]
})
export class DropdownSelectComponent implements ControlValueAccessor {
@Input() combinedInput: boolean;
@Input() dropdownItems: DropdownItem[];
_selectedItem: DropdownItem;
showList: boolean;
buttonIcon: string;
propagateChange = (_: any) => {};
set selectedItem(value) {
this._selectedItem = value;
this.propagateChange(this._selectedItem);
}
get selectedItem() {
return this._selectedItem;
}
constructor(private el: ElementRef) { }
OnInit() {
this.buttonIcon = BUTTON_ICON_INACTIVE;
this.selectedItem = this.dropdownItems[0];
console.log(this.dropdownItems);
}
onClick() {
this.toggleShowList();
}
toggleShowList() {
this.showList = !this.showList;
if (!this.showList) {
this.buttonIcon = BUTTON_ICON_INACTIVE;
} else {
this.buttonIcon = BUTTON_ICON_ACTIVE;
}
}
onClickItem(item) {
this.showList = false;
this.selectedItem = item;
this.propagateChange(this.selectedItem);
}
writeValue(value: any) {
if (value !== undefined) {
this.selectedItem = value;
}
}
registerOnChange(fn) {
console.log('register change');
this.propagateChange = fn;
}
registerOnTouched() {}
}

Answer 1

您需要添加为提供程序NG_VALIDATORS，请参阅https://medium.com/@tarik.nzl/angular-2-定制形式-带验证的控制-输入-2b4cf9bc2d73

因此，您的供应商变得像

providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => DropdownSelectComponent),
multi: true,
},
{
provide: NG_VALIDATORS,
useExisting: forwardRef(() => DropdownSelectComponent),
multi: true,
}

如果您在自己的组件中需要额外的验证器(否则您不需要(，您可以实现validator并创建一个类似的函数Validate

public validate(c: FormControl) {
//implement your logic here
let error:boolean
return error?{
customError:"ERROR"
}:null;
}

Answer 2

定义

@Output('itemSelected') itemSelected = new EventEmitter(); //in DropdownSelectComponent

然后当你选择商品时，请致电

this.itemSelected.emit(item);

你可以在像这个这样的主要组件中获得所选项目

<app-dropdown-select formControlName="itemName"
[dropdownItems]="items" (itemSelected)="doValidation($event)">
</app-dropdown-select>