angular - 表单组验证器

标签 angular angular-reactive-forms ngx-datatable

如何将验证器添加到包含表单控件的表单组中。

我有这个。

users.forEach(e => {
  console.log(e);
  this.filasValidator.push(new FormGroup({
      dia: new FormControl('0')
  },
    [Validators.required, Validators.min(1)]
  ));
});
console.log(this.filasValidator.controls[0].invalid);

FilasValidator 是一个 FormArray

在模板 html 中我有这个

  <ng-template formArrayName="filas"
               #inputTemplate
               let-value="value"
               let-row="row"
               let-column="column"
               let-rowIndex="rowIndex">
    <label [formGroupName]="rowIndex" class="pya-cell">
      <small class="text-muted d-block d-lg-none">{{ column.name }}</small>
      <!--REVISAR VALUE, DA ERROR DE REASIGNACION -->
      <input
        (input)="editHour(rowIndex, column.prop, $event)"
        formControlName="dia"
        [ngClass]="{'is-invalid': filasValidator.controls[rowIndex].invalid}"
        type="number"
        value="{{ value }}"
        class="number text-center w-50 form-control light"
      />
    </label>
  </ng-template>

这很难解释,但是看我有一个表,其中一周中有几天,对于那些天我必须放置一个表单控件,但是如果至少有 1 条记录大于 0,则该行必须有效。 这就是为什么我需要在表单控件之外进行验证

我试过了

  this.filasValidator.push(new FormGroup({
      lunes: new FormControl('0', Validators.min(1)),
      martes: new FormControl('0', Validators.min(1)),
      miercoles: new FormControl('0', Validators.min(1)),
      jueves: new FormControl('0', Validators.min(1)),
      viernes: new FormControl('0', Validators.min(1))
  },
    [Validators.required]
  ));

但我需要 FormControls 之外的 Validators.min。

最佳答案

编辑:

我做了这个更改,制作了一个自定义验证器并放入 FormGroup 中来验证所有字段

Stackblitz

export class OpponentDetailsComponent implements OnInit {
      objFormGroup = this.formBuilder.group(
        {
          test: [null],
          test2: [null]
        },
        { validators: [this.validatorArray()] }
      );

      constructor(private formBuilder: FormBuilder) {}

      ngOnInit(): void {}

     validatorArray(): ValidatorFn {
        return (group: FormGroup) => {
          for (let key of Object.keys(group.controls)) {
           if (group.controls[key].value > 0) return null;
        }

        return { min: 1 }
      };
   }
}

原答案:

您可以将验证器放入 FormGroup 中,就像放入 FormControl 中一样,如下所示:

new FormGroup({dia: new FormControl('0')}, [Validators.required])

关于angular - 表单组验证器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67390171/

相关文章:

angular 7 如何将 ngx-datatable 内容导出到 excel 表?

angular - 错误 : StaticInjectorError(DynamicTestModule)[CityService -> Http]: No provider for Http

javascript - 合并两个 observables,单一输出

angular - Kendo UI Angular 2 Grid Excel 导出

当 mat-expansion-panel-header 在子组件中时 CSS 不适用

Angular 2+ Material mat-chip-list formArray验证

reactjs - 从子 React Reactive Form 更新父状态变量

angular - Froala 编辑器 formControl 在第二次加载后不更新

angular6 - ngx 数据表页脚图标不显示

angular - ngx-datatable 模型中的多列