1

我有一个包含两个字段的表单...一个是一组 3 个复选框（必须选择其中一个），另一个是作为文件的输入类型。（必须选择）。我正在为它们使用响应式表单自定义验证器，并且只有在向表单提供 poper 值之后，我才必须启用提交按钮。但是验证器似乎没有工作。

HTML页面：

<input type="file"  id="selectFile" #selectFile accept=".zip" formControlName ="fileUpload" name="file" class="form-control"  class="btn" value="file" required />
<span *ngFor="let tool of toolTypeList">
  <label class="checkbox-inline col-md-2 " style = "text-align: left;padding-left:35px"> 
    <input type="checkbox"  formControlName ="selectTool"
      name="{{tool.toolType}}" 
      value="{{tool.toolType}}"
      (change)="change($event, tool)">
      {{tool.toolType}}
  </label>
</span>

零件 ：

this.rForm = fb.group({
  'selectTool': new FormControl('', [
    Validators.required,
    this.validateTools
  ]),
  ' fileUpload': new FormControl('', [
    Validators.required,
    this.noFilePresent
  ]),
});

验证器：

noFilePresent(): Boolean {
  if (this.fileuploaded.size <= 0) {
    return true;
  }
  return false;
}

validateTools(c: AbstractControl) {
  console.log('here in custom validator : ' + c.value);
  let response: any = null;
  if (c.value == null) {
    response = this.selectedTools.length > 0 ? null : {
      validateTools: {
        valid: false
      }
    };
  }

我假设对于 fileUpload 字段，创建的验证器在其结构中是错误的，因为没有 formcontrol 对象作为参数传递。但是对于复选框（selectTool）验证器的大概结构正确，它不起作用。请帮我找出我的错误。提前致谢。

4

1 回答 1

1

我像这样创建了我的自定义验证器。如果您只需要他们在那里并且像您所做的那样被引用，则可以在您的班级中。

private noFilePresent(): ValidatorFn {
    return (control: AbstractControl): { [key: string]: any } => {
        if(control.value == null || control.value.length == 0) {
            return {'uploadInvalid': {value: control.value}};
        }
        return null;
    }
}

我认为 control.value 这里的值可以是任何值。然后，您可以使用 getter 检查是否有错误

 get upload() { return this.rForm.get('fileUpload'); }

和其他地方

 if(this.upload.errors.uploadInvalid) {
     // do stuff or return error message or something
 }
于 2018-04-10T10:04:20.127 回答