Question

我对Angular 2+有很大的疑问。我创建了组合框过滤器，它可以处理像这样的数组中的字典数据

[{
  value: 'fb',
  description: 'football'
}]

用户可以从过滤列表中选择词典项之一，或者将值写入输入元素，从而触发过滤器。

此后，应用程序检查表单是否有效（描述等中存在来自表单的字典）。我使用[value]标签将输入与表单绑定。

<input type="text" [value]="getSelectedSport.description"

问题-我的后端仅接受模型中的“值”，但此刻，我发送了描述。我可以解决这个问题，更改

getSelectedSport.description

到

getSelectedSport.value,

但这是不正确的，因为在表单中，我仅获得字段的“值”（短）值。

如何在不更改表示形式的情况下更改表单值？我无法使用Submit事件转换数据，因为我是从父元素：（

<input class="form-control" type="text" (focus)="toggleVisible(true)" (blur)="handleBlur()" (keydown)="handleSelectActions($event)"
        [formControl]="selectedSport" [value]="getSelectedSport.value" [maxLength]="longestDescription">
      <ul class="select" [ngClass]="(isOptionVisible) ? 'isVisible' : 'isNotVisible'">
        <li *ngFor="let item of filterModel; index as i" class="option" (click)="selectItem(item.description)"
           [attr.data-order]="i" [ngClass]="this.focusedIndex === i ? 'selected' : ''">
          {{item.description}}
        </li>
      </ul>

ts文件（某些方法，下面链接到整个文件）

public get getSelectedSport(): AbstractControl {
    return this.selectedSport;
  }

public selectItem(item: any) {
    this.isOptionVisible = false;
    this.selectedSport.setValue(item)
  }

public handleBlur() {
    if (this.selectedSport.valid){
      this.isOptionVisible = false;
    }
  }

private selectViaEnter() {
    this.selectItem(this.filterModel[this.focusedIndex].description);
    this.focusedIndex = 0;
  }

https://github.com/Kamilnaja/filterComboBox/blob/master/src/app/combo/combo.component.ts https://github.com/Kamilnaja/filterComboBox/blob/master/src/app/combo/combo.component.html

Answer 1

经过一段时间尝试通过尝试结束错误解决此问题后，我找到了答案。基本上，我们希望使用描述显示表单值，并在提交时发送模型值。为什么不使用两种形式。

在ts文件中，我添加了一个表单控件，该控件可以处理所有操作，但是除了父控件的第一个表单组之外，还有其他formControlName。

当表单值看起来正确时，我将使用对象的正确值更新两个输入字段。下面是一些角度伪代码：

export class myComponent {
    myNewFormControl: FormGroup = new FormControl('');

    public selectItem(item: any) {
        this.isOptionVisible = false;
        this.selectedSport.setValue(item.value);
        this.myNewFormControl.setValue(item.description);
    }
}

因此，现在，我可以从HTML中删除导致表单的第一个错误，并以所需的形式显示模型描述。

<input formControlName="myNewFormControl" value=[item.description] /><!-- and other actions also here -->

在提交时，表单也提交了我需要的值，所以我认为这是正确的答案。

角反应形式模型-发送值，而不是描述

1 个答案: