Angular2 - 使用旧数据的自定义验证器

Question

我编写的自定义验证器有问题。验证器用于验证组件中的所有数据。

设置如下：

组件显示一个包含 X 行数据的表格。一些行是仅显示模式，而其他行将处于编辑模式（表中的某些单元格将具有输入、选择等）。支持表格的是一个数据对象数组（tableData）。

如果一行处于编辑模式，则每个输入都双向绑定到 tableData 数组中的相应元素。

我的自定义验证器应用于表单标签并将 tableData 作为输入。一切大部分都有效。验证数据查看表中的每一行，并完成我需要做的所有事情。

问题是基于我的自定义验证器的数据是旧数据。因此，如果一行处于编辑模式，当我更改选择中的值时，tableData 会更新，但传递给验证器的版本是在更新之前。所以我总是在验证旧版本的 tableData。

我不确定如何获得验证以使用最新版本的 tableData。我认为这个问题可能与 select 绑定更改了 tableData 数组中对象的值有关，但 tableData 数组本身实际上并没有改变。

我尝试将回调添加到正在编辑的行中选择的（更改）事件。调用（更改）的方法使用 ChangeDetectorRef 手动触发更改检测，但这不起作用。

我不想用所有的整个文件向每个人发送垃圾邮件，所以我尝试只添加重要的 sn-ps。

这是模板：

<form #f="ngForm" novalidate custom-validator="{{tableData | json}}">
    <p-dataTable [value]="tableData">
    ...

        <p-column [header]="'Program Name'">
            <template let-row="rowData" let-idx="rowIndex" pTemplate type="body">
            <span *ngIf="!row['edit']">
                {{row['data'].programName}}
            </span>
                <div *ngIf="row['edit']">
                    <select #progName="ngModel" [(ngModel)]="row['data'].programCode"
                            title="Select Program" required (change)="onProgramChange($event, idx)"
                            name="programSelect-{{idx}}">
                        <option [value]=""></option>
                        <option *ngFor="let prog of programList" [value]="prog.code">
                            {{prog.name}}
                        </option>
                    </select>
                </div>
            </template>
        </p-column>
    ...

    </p-dataTable>
</form>

这是支持组件：

//imports...

...

private tableData: PersonAssignmentRowData[] = [];
private programList: Program[] = [];

...

onProgramChange(event: any, index: number) {

    for(let prog of this.programList) {
        if(prog.code == event.target.value) {
            this.tableData[index].data.programAcronym = prog.acronym;
            this.tableData[index].data.programLocation = prog.location;
            this.tableData[index].data.programName = prog.name;
            break;
        }
    }
}

...

这是验证器：

@Directive({
    selector: '[custom-validator]',
    providers:[{provide: NG_VALIDATORS, useExisting: CustomValidator, multi: true}]
})
export class CustomValidator implements Validator{

    @Input('custom-validator') tableDataString: string;

    validate(control: AbstractControl) {
        if(this.tableDataString == null || this.tableDataString.length == 0) {
            return null;
        }

        let tableData: PersonAssignmentRowData[] = [];
        tableData = JSON.parse(this.tableDataString);

        let message: string = '';

        //logic that tests the validity of the data and sets any error messages in the message variable

        if(message.length > 0) {
            return {'validationMessage': message};
        } else {
            return null;
        }
    }
}

Answer 1

现在很清楚了。当然它不会起作用。验证器应该检查的唯一数据源是传递给 validate() 方法的控件。没有 @Inputs() 或任何类似的东西。唯一的区别是下面的 control.value 将包含表单中所有控件的所有值，而不仅仅是您的表格，因此您应该在表格所在的位置选择正确的嵌套值。

@Directive({
    selector: '[custom-validator]',
    providers:[{provide: NG_VALIDATORS, useExisting: forwardRef(() => CustomValidator), multi: true}]
})
export class CustomValidator implements Validator {

    validate(control: AbstractControl) {
        tableData = control.table.value; // need to figure out exact path based on your form structure

        let message: string = '';

        //logic that tests the validity of the data and sets any error messages in the message variable

        if(message.length > 0) {
            return {'validationMessage': message};
        }
        return null;
    }

}