Question

当dataItem中的一项被修改时，我试图修改分配给Kendo Grid的FormGroup的FormGroup验证。逻辑是：如果所选的AuthType为基本，则表单验证应“要求”用户名和密码。
如果所选的AuthType为QueryString，则表单验证应“要求” queryString。如果所选的AuthType为AuthorizationHeader，则表单验证应“要求” authorizationHeader。

此问题是，在更新FormGroup之后，验证似乎不再能正常运行。仍然遵循旧的验证方式，并且当更改AuthType的选择时，现在隐藏的字段的验证方式将阻止提交表单。

他是我的代码： web-connections.component.ts：

sbt new

web-connections.component.html

import { Component, OnInit } from '@angular/core';
import { ConnectionService } from '../connections.service';
import { SourceTypeService } from '../source-type-selector/source-type.service';
import { DialogSettings, DialogService, DialogAction } from '@progress/kendo-angular-dialog';
import { CategoryService } from 'src/app/category/category.service';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'web-connections',
  templateUrl: './web-connections.component.html',
  styleUrls: ['./web-connections.component.css']
})
export class WebConnectionsComponent {
  webConnections = [];
  itemBeingEdited = {};
  editedRowIndex = 0;
  editedConnection = {};
  filteredWebConnections: any[];
  formGroup: FormGroup;

  selectedSourceType;
  selectedCategory: any;

  WEBAuthorizationEnum = [
    {name: "None", value:0},
    {name: "Basic", value:1},
    {name: "QueryString", value:2},
    {name: "AuthorizationHeader", value:3}
  ]

  subscriptions = [];
  constructor(private service: ConnectionService, 
    private sourceTypeService: SourceTypeService,
    private categoryService: CategoryService,
    private dialogService: DialogService) {
    this.subscriptions.push(this.sourceTypeService.selectedSourceType.subscribe(x => {
      this.selectedSourceType = x;
      this.UpdateData();
    }));
    this.subscriptions.push(this.categoryService.selectedCategory.subscribe(x => {
      this.selectedCategory = x;
      this.UpdateData();
    }));
    this.subscriptions.push(this.service.connections.subscribe(c => {
      this.webConnections = c.filter(x => x && x.sourceTypeID == 2);  
      this.UpdateData();    
    }));
  }

  ngOnDestroy(): void {
    this.subscriptions.forEach(x => x.unsubscribe());
  }

  AuthType(authType) {
    return this.WEBAuthorizationEnum[authType].name;
  }

  UpdateData() {
    if (this.webConnections != null && this.selectedCategory != null) {
      this.filteredWebConnections = this.webConnections.filter(x => x.categoryID == this.selectedCategory.categoryID);
    }
  }

  ngAfterViewInit() {
    this.service.RefreshIfOld();
  }

  public addHandler({sender}) {
    this.closeEditor(sender);
    this.formGroup = this.createFormGroup({});
    sender.addRow(this.formGroup);
  }

  public editHandler({sender, rowIndex, dataItem}) {
    this.closeEditor(sender);
    this.itemBeingEdited = {...dataItem};
    this.editedRowIndex = rowIndex;
    this.editedConnection = Object.assign({}, dataItem);
    this.formGroup = this.createFormGroup(dataItem);
    sender.editRow(rowIndex, this.formGroup);
  }

  public cancelHandler({sender, rowIndex}) {
    this.closeEditor(sender, rowIndex);
  }

  grid;
  private closeEditor(grid, rowIndex = this.editedRowIndex) {
    grid.closeRow(rowIndex);
    this.resetItem(this.editedConnection);
    this.editedRowIndex = undefined;
    this.editedConnection = undefined;
  }


  public saveHandler({sender, rowIndex, formGroup, isNew}) {
    this.service.save(formGroup.value, isNew);
    sender.closeRow(rowIndex);
  }

  public resetItem(item) {
    item = {...this.itemBeingEdited};
  }

  public removeHandler({dataItem}) {
    var dialog = new DialogSettings();
    dialog.title = 'Confirm Delete';
    dialog.content =  "Are you sure you want to delete?  Deleting a Connection will ALL DATA that is currently associated with it. (Requests, DataMaps, Jobs, etc).";
    var actionYes = new DialogAction();
    actionYes.primary = true;
    actionYes.text = "Yes";
    var actionNo = new DialogAction();
    actionNo.primary = false;
    actionNo.text = "No";
    dialog.actions = [actionYes, actionNo];
    this.dialogService.open(dialog).result.subscribe((actionResult : any) => {
      if (actionResult.text == "Yes") {
        this.service.remove(dataItem);
      }
    });
  }

  fieldForEdit;
  fieldForEditValue;
  showExpressionEditor = false;
  openEditorDialog(fieldName) {
    this.fieldForEdit = fieldName;
    this.fieldForEditValue = this.formGroup.get(this.fieldForEdit).value;
    this.showExpressionEditor = true;
  }

  updateFieldForEdit(value) {
    this.formGroup.get(this.fieldForEdit).setValue(value);
    this.fieldForEdit = undefined;
    this.fieldForEditValue = undefined;
  }

  resetValidators() {    
    this.formGroup.controls['username'].clearValidators();
    this.formGroup.controls['username'].setErrors(null);
    this.formGroup.controls['username'].setValue(null);
    this.formGroup.controls['password'].clearValidators();
    this.formGroup.controls['password'].setErrors(null);
    this.formGroup.controls['password'].setValue(null);
    this.formGroup.controls['queryString'].clearValidators();
    this.formGroup.controls['queryString'].setErrors(null);
    this.formGroup.controls['queryString'].setValue(null);
    this.formGroup.controls['authorizationHeader'].clearValidators();
    this.formGroup.controls['authorizationHeader'].setErrors(null);
    this.formGroup.controls['authorizationHeader'].setValue(null);
    if (this.formGroup.get('authType').value == 1) {
      this.formGroup.controls['username'].setValidators(Validators.required);
      this.formGroup.controls['password'].setValidators(Validators.required);
    }
    if (this.formGroup.get('authType').value == 2) {
      this.formGroup.controls['queryString'].setValidators(Validators.required);
    }
    if (this.formGroup.get('authType').value == 3) {
      this.formGroup.controls['authorizationHeader'].setValidators(Validators.required);
    }    
    this.formGroup.controls['username'].updateValueAndValidity();
    this.formGroup.controls['password'].updateValueAndValidity();
    this.formGroup.controls['queryString'].updateValueAndValidity();
    this.formGroup.controls['authorizationHeader'].updateValueAndValidity();
    this.formGroup.updateValueAndValidity();
  }

  createFormGroup = dataItem => new FormGroup({
    "uri":new FormControl(dataItem.uri, Validators.required),
    "name": new FormControl(dataItem.name, Validators.required),
    "authType": new FormControl(dataItem.authType, Validators.required),
    "username": new FormControl(dataItem.username),
    "password": new FormControl(dataItem.password),
    "queryString": new FormControl(dataItem.queryString),
    "authorizationHeader": new FormControl(dataItem.authorizationHeader),
    "sourceTypeID": new FormControl(this.selectedSourceType.sourceTypeID),
    "categoryID": new FormControl(this.selectedCategory.categoryID)
  });
}

Answer 1

因此，事实证明，我最终想找到解决自己问题的方法。

该解决方案正在为需要对自己的dataItem做出反应的验证功能实现自定义验证器。

我还必须在枚举选择中实现一些代码，以设置authType的FormGroup值，并触发对自定义验证字段的初始验证，并重置这些字段中的所有现有值。

请参阅以下解决方案：

在component.html中：

m_chronoSets

在component.ts中：

<kendo-grid-column field="authType" title="Auth Type" width="150">
    <ng-template kendoGridEditTemplate let-dataItem="dataItem" >
      <kendo-dropdownlist [data]="WEBAuthorizationEnum" (selectionChange)="resetValidators($event)" [popupSettings]="{width: 280}" textField="name"
        valueField="value" valuePrimitive="true" name="authType" [formControl]="formGroup?.get('authType')"></kendo-dropdownlist>
    </ng-template>
    <ng-template kendoGridCellTemplate let-dataItem="dataItem">
      {{AuthType(dataItem.authType)}}
    </ng-template>
  </kendo-grid-column>

谢谢！

Kendo UI Grid FormGroup自定义验证-DropdownList控制的验证

1 个答案: