Typhead 空值应重置另一个选择对象的选项

Posted 2023-05-08

【中文标题】Typhead 空值应重置另一个选择对象的选项

【英文标题】：Typhead empty value should reset the options of another select object

【发布时间】：2019-01-24 07:22:16

【问题描述】：

我在页面中有一个打字头，用于加载客户帐户的用户。 在我点击打字头结果中的一个项目后，用户加载到下一个选择框，但在我提交之前，我去从打字头中删除该选项，清除它并执行 onBlur 另一个选择框仍然显示错误的结果。

检测到字头值为空后，在哪里可以删除那个框的选项？

这是 html，下面是我认为相关的代码。

附：正如你想象的那样，我不是 Angular 专家

<div class="form-group">
    <label class="control-label"> "ASSUME_IDENTITY.LABELS.CUSTOMER" | translate </label>
    <div>
        <ng-template #rt let-r="result" let-t="term">
             r.fullPath 
        </ng-template>

        <input id="typeahead-format" name="nodeFullPath" type="text" mdbActive [ngClass]="'invalid': validNode, 'valid': validNode"
         class="form-control" #el (focus)="onFocus($event)" (selectItem)="selectItem($event)" (blur)="onBlurMethod(selectedNode)"
         [ngbTypeahead]="search" [resultTemplate]="rt" [inputFormatter]="formatter" />

    </div>
</div>
<div class="form-group">
    <label class="control-label"> "ASSUME_IDENTITY.LABELS.USER" | translate </label>
    <div>
        <select class="form-control" [(ngModel)]="selectedUser" name="selectedUser" [disabled]="!(usersLoaded | async)">
            <option *ngFor="let user of (usersForNode | async)" [ngValue]="user"> user.label | translate</option>
        </select>
    </div>
</div>
<div>
    <button type="button" [disabled]="!(usersLoaded | async)" class=" btn btn-primary pull-right" (click)="assumeIdbuttonPressed()">
         "ASSUME_IDENTITY.BTN_ASSUME_IDENTITY" | translate </button>
</div>

.....................

setSelectedUserToFirstItem(user: HttpOption) 
    this.selectedUser = user;


onFocus(e: Event): void 
    e.stopPropagation();
    setTimeout(() => 
    const inputEvent: Event = new Event('input');
    e.target.dispatchEvent(inputEvent);
, 0);


search = (text: Observable<string>): Observable<CustomerNodePath[]> =>
    text
        .debounceTime(100)
        .distinctUntilChanged()
        .map((term: any) => this.fullPathList.filter(v => v.fullPath.toLowerCase().indexOf(term.toLowerCase()) > -1))

formatter = (x:  fullPath: string ): string => x.fullPath;

selectItem = (event: any) => 
    this.selectedNode = event.item;
    this.store.dispatch(new GetUsersForNode(this.selectedNode.id));


onBlurMethod = (node: CustomerNodePath): void => 
    if (!this.selectedNode) this.dispatchNodeValidationError();


private dispatchNodeValidationError = (): void => 
    this.store.dispatch(new NodeValidationError());

【问题讨论】：

嗨 @tekin 我在 stackblitlz 上创建了一个演示。请在 stackblitz 上提供您的代码。

感谢 Krishna 我实际上忘记了我对此有解决方案。我会在下面发帖。抱歉，我很难在在线编辑器中重新创建它，因为有很多部分一起工作。

【参考方案1】：

这是我们的解决方案：

把这个放到组件里。

 onBlurMethod = ( event: any, node: CustomerNodePath): void => 
        if (event.target.value === "") this.store.dispatch(new ClearUsers())
        if (!this.selectedNode) this.dispatchNodeValidationError()
    

如您所见，reducer 中注册了一个名为 ClearUsers 的新操作，我们正在调用它。

这是 Reducer 中的一个新案例，所以也是一个新的 Action：

case AssumeIdActionTypes.GetUsersForNodeSuccess:
        const usersForNode = mapToHttpOption(action.users);
        return ...state,
            usersForNode: usersForNode,
            usersLoaded: hasUser(usersForNode),
            error: ''
        ;

case AssumeIdActionTypes.ClearUsers:
    return ... state,
        usersForNode: []
    ;