如何在angular7中的单个formControl中添加多个输入类型?

时间:2019-11-12 12:59:04

标签: angular angular-reactive-forms angular-formbuilder

我正在做一个有角的项目,其中我正在使用formbuilder。我需要两个输入选项。
1)选择
2)输入文字框
在选择输入中选择选项时,将显示文本框。

我在提交表单时发送数据时遇到问题。文本框中的值正在发送未定义,或者在选择多个情况下仅发送输入文本框。

如何发送两个值?

示例代码:-

component.html

<div class="col">
  <div class="form-group">
    <label>Platform</label>
    <select title="Select" formControlName="platform" class="form-control" multiple data-selected-text-format="count">
      <option value="aws">aws</option>
      <option value="azure">azure</option>
      <option value="on-premise">on-premise</option>
      <option (click)="handleCheck();">Other</option>
    </select>
    <input #item(keyup)="handleOther(item.value);" class="form-control" *ngIf="check" type="text">
  </div>
</div>

component.ts

check = false;
handleCheck() {
  this.check = !this.check;
}

platformOther: string;

handleOther(item) {
  this.platformOther = item;
}
getf() { return this.sampleForm.controls; }

onSubmit() {
  if (this.platformOther) {
    this.sampleForm.controls.platform.value.push(this.platformOther);
  }
  let value = this.f.platform.value.slice();
  const index = value.indexOf("Other");

  if (index !== -1) {
    value.splice(index, 1);
  }

  this.toBe.platform = value.toString();
}

这正在工作。我所做的是创建了一个函数,并在输入文本框中的keyup事件中将该值保存在component.ts中的变量中。然后我将该变量推入数组平台。

您能以更正确的方式帮助我吗?

0 个答案:

没有答案