在作为组件的反应形式控件上使用验证 [英] Using a validation on a reactive form control that is a component

问题描述

如何在FormBuilder中对该组件运行自定义验证?

How can I run custom validation on this component in the FormBuilder?

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

For example, when a user selects an item from the dropdown onClickItem(item) how could run a validation function on the selected item from the main form component?

主要表单组件中的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],

Then I could use a validator on itemName like this: 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() {}

}

推荐答案

定义

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

然后，当您选择项目调用时

then when you you select item call

this.itemSelected.emit(item);

您可以像这样在主要组件中获取所选项目

you can get the selected item in main component like this

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

这篇关于在作为组件的反应形式控件上使用验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！