首页 文章

更新复选框值的输入控件

提问于
浏览
0

为冗长的解释道歉,因为我不确定如何最好地描述我的问题/问题 . 我是Angular2和打字稿的新手(现在只编写了几个月),并且多年来一直没有编码,所以再次排名新手......

我在更改组织 Value 时填充的页面中有一个动态的费用类型列表 . 该列表由一个复选框和一个替换复选框标签的文本字段组成 . 我在检查复选框时启用了文本字段,但我的工作结构非常糟糕 . 我很快就会在下面展示我的代码 .

我正在寻找的流程如下:

  • “费用类型”列表是根据我从基于OrganizationID的数据库获取的数组填充的

  • 通过双向绑定到输入控件,我的代码和html可以正常工作

  • 文本框以禁用方式开始,因此仅显示值 . 当我单击一个复选框时,我只想启用该复选框的相关文本框

  • 再次,我有这个工作,虽然我如何让它工作是不正确我相信...

  • 启用文本框后,我将能够更新费用类型,然后通过其他功能保存

  • 我被告知我现在需要在列表中添加第二个文本框,这样我就会有两个与每个复选框关联的文本框 .

  • 到目前为止,我能够做到的是确认我无法弄清楚如何通过复选框更新第二个文本框,就像我到目前为止实现该过程一样 .

我的html代码添加了第二个文本框,试图让它工作,我将在以后格式化

Update 经过更多调查后,我已通过将[(ngModel)] =“"expenseType.checked"添加到复选框输入并更新说明文本框以使用[已禁用] = "!" expenseType.checked”更新了答案的问题 .

我还做了更多的阅读,然后看看如何隐藏类别文本框,直到选中,发现使用[隐藏]并不完全完美,所以更改类别文本框使用* ngIf =“expenseType.checked”

我还删除了onChecked()方法中事件对象的引用 . 将其保留在代码中供以后使用

<div>
  <label>Default Expense Types:</label>
  <div *ngFor="let expenseType of expenseTypes">
    <div class="checkBox">
      <input for="expenseTypeText"
             type="checkbox"
             class="checkBox"
             [checked]="false"
             (change)="onChecked($event)"
             [(ngModel)]="expenseType.checked"
             >
      <input type="text"
             class="text_style"
             id="expenseTypeText"
             [disabled]="!expenseType.checked"
             [(ngModel)]="expenseType.description"
             >
      <input *ngIf="expenseType.checked"
             type="text"
             class="text_style"
             id="expenseTypeCategory"
             [(ngModel)]="expenseType.category"
             >
    </div>
  </div>
</div>

我班上的onChecked方法

onChecked($event) {
 /* *if ($event.target.checked == true) {
    $event.target.nextElementSibling.disabled = false;}
  else {
    $event.target.nextElementSibling.disabled = true;
  }* */ removed
}

截至目前截取页面上的费用表类型列表 . List with two text boxes

这两组代码用于使用expenseType描述和类别填充文本框 . 我遇到的问题是我无法以与描述框相同的方式启用类别框 . 我非常确定这是因为我的实现访问了我的onChecked()方法中的文本框 . 到目前为止,所有尝试都只能同时启用或禁用所有类别文本框 . 我无法访问特定类别文本,就像我在描述文本框中所做的那样 .

我确信在ngFor和可能的ViewChildren甚至表单和表单组/控件中使用索引的修订可能是正确的方法,但我无法弄明白 .

最终,(在一个伟大的世界中,我想隐藏类别文本框,直到我选中复选框,当我这样做时,说明字段已启用,类别字段出现并已启用准备编辑 . 我将采取我的只能在选择复选框时启用和禁用两个文本框....

我感谢任何反馈,我相信我也会得到一些关于解析事件数组以获得兄弟姐妹的反馈 . 我请求任何和所有的帮助 .

1 回答

  • 0

    为您连接输入的正确方法将是以下模式:

    <input type="checkbox" [(ngModel)]="isSomethingChecked"> 
    <input type="text" [disabled]="isSomethingChecked">
    

相关问题