Question

我有这样的组件（没有表单标签），如果在字段中未输入任何值，我想禁用搜索按钮：

<app-card atleastOneValidator [controlsToBeValidated]='["firstName","lastName"]'>
  <div class="row">
    <div class="col-md-3 col-sm-6">
      <div class="form-group">
        <label for="firstName">First Name</label>
        <input type="text" class="form-control" Id="firstName" [(ngModel)]="searchModel.firstName" autocomplete="off">
      </div>
    </div>
    <div class="col-md-3 col-sm-6">
        <div class="form-group">
          <label for="lastName">Last Name</label>
          <input type="text" class="form-control" id="lastName" [(ngModel)]="searchModel.lastName" autocomplete="off">
        </div>
      </div>
  </div>
  <button class="btn btn-success" id="filter-button">Search</button>
<app-card>

应输入至少一个字段，我要实现至少一个验证器，我创建了以下验证程序指令。

import { Validator, AbstractControl, NG_VALIDATORS } from '@angular/forms';
import { Input, OnInit, ElementRef, Renderer } from '@angular/core';
import { Directive } from '@angular/core'

@Directive({
  selector: '[atleastOneValidator]',
  providers: [{
    provide: NG_VALIDATORS,
    useExisting: AtleastOneValidatorDirective,
    multi: true
  }]
})
export class AtleastOneValidatorDirective implements Validator, OnInit {
  @Input('controlsToBeValidated') controlsToBeValidated: Array<string>;
  ngOnInit(): void {

  }

  constructor(el: ElementRef, renderer: Renderer) {

  }

  validate(control:AbstractControl): {[key:string]: any} | null{
    const atleaseoneSelected = false;
    this.controlsToBeValidated.forEach(element => {
        //not sure what to write here
    });
    return {"atleastoneSelected":true};
  }
}

我不确定如何进行操作，因为找不到像jQuery那样的任何方法来选择角度中的元素值。
在验证指令中，我想遍历传递的元素ID，并检查是否在其中输入了值。

如何在Angular2中实现至少一个字段要求验证

0 个答案: