Angular FormGroup 和 RxJs

Question

我想使用 FormGroups 重写我的一些表单，以便更轻松地批量验证输入等。我的问题是我一直在使用 RxJs 来收集值更改并开始根据新值，因为这些输入字段主要是数据表列过滤器。

到目前为止我所拥有的：

表单组：

private inputGroup = new FormGroup({
        fieldA: new FormControl(),
        fieldB: new FormControl(),
        fieldC1: new FormControl(),
        fieldC2: new FormControl(),
});

输入：

<input class="form-control" type="text" name="fieldA" formControlName="fieldA" />
<input class="form-control" type="text" name="fieldB" formControlName="fieldB" />
<input class="form-control" type="text" name="fieldC1" formControlName="fieldC1" />
<input class="form-control" type="text" name="fieldC2" formControlName="fieldC2" />

一个 Observable：

private search$ = new Subject<string[] | undefined>();

将所有参数收集到所需的 Observable 中的方法：

protected getCombinedParams(): Observable<GetParams> {
    return combineLatest([
        ...this.combineDefaultsBase,
        this.search$,
    ]).pipe(
        map(([PageIndex, PageSize, OrderColumns, searchValues]) => ({
            PageIndex, PageSize, OrderColumns,
            FieldA: searchValues['fieldA'],
            FieldB: searchValues['fieldA'],
            FieldC: [searchValues['fieldC1'], searchValues['fieldC2']]
        } as GetParams)));
}

this.combineDefaultsBase 位于基类中，包含用于排序、每页行数和页码的基本参数。

我有 inputGroup valuechanges 触发我的 observable：

 this.inputGroup.valueChanges.pipe(
        debounceTime(defaultInputDebounceTime)
    ).subscribe(newValue => {
        this.search$.next(newValue);
    });

GetParams 类：

export interface GetParams {
  FieldA?: string;
  FieldB?: string;
  FieldC?: string[];
}

我想要做的是将从 valuechanges 获得的 FormGroup 数组中的值映射到所需的 GetParams 值。 Ts 现在在FieldA: searchValues['fieldA'] 线上抱怨

(TS) 元素隐含地具有“任何”类型，因为类型的表达式 '"fieldA"' 不能用于索引类型 'number |细绳[]'。财产 'fieldA' 不存在于类型 'number |字符串[]'。

怎么说它是一个数字？它来自哪里？

Answer 1

在您的情况下，searchValues 的类型是 string[] | undefined（因为这是来自 search$ 的值，即 Subject<string[] | undefined>()）

问题是你无法访问未定义数组的字段属性。

searchValues['fieldA'] 未定义，因为searchValues 的类型