首页 文章

将输入字段绑定到ngFor循环中的按钮| Angular 2

提问于
浏览 次
0

我试图在一个表单中使用和 - 按钮创建一些数字输入，可以增加/减少数字值 . 我使用存储在几个数组中的值创建带有* ngFor循环的输入和按钮 .

但是，我无法想出一种方法将输入绑定到也在同一* ngFor循环中创建的按钮 . 我一直遇到这个错误 - Cannot assign to a reference or variable!

我尝试过使用ngModel，只是绑定 [value] . 我得到同样的错误 .

还有另一种方法吗？

Stackblitz演示 - https://stackblitz.com/edit/angular-m3gkrq

我试过的代码 -

<div class="border rounded p-4 m-1" *ngFor="let type of types">
    <div *ngFor="let subType of subTypes[type]">
      <label for="{{subType}}SlotsInput">{{type | titlecase}} : {{subType}}</label>
      <div class="input-group mb-3">
        <div class="input-group-prepend">
          <button class="btn btn-outline-secondary" type="button">-</button>
          <button class="btn btn-outline-secondary" type="button" (click)="(type+subType)++">+</button>
        </div>
        <input type="number" class="form-control" placeholder="0" id="{{subType}}SlotsInput"  min="0" max="10" [name]="type+subType" [(ngModel)]="type+subType">
      </div>
    </div>
  </div>

export class AppComponent  {
  types = ["dog", "horse", "hen", "elephant"];
  subTypes = {
    dog:["labrador", "vizsla"],
    horse:["arabian","shire","belgian"],
    hen:["plymouth rock", "leghorn", "bramha"],
    elephant:["african", "asian"]
  };

编辑：包含它不清楚，我想和 - 按钮增加/减少它们旁边的输入字段中的数字 .

angular

1 回答

  • 1

    要使用 ngModel ，您必须允许绑定输入 . 您的输入必须在 form 标签内，其角度转换为他自己的特殊形式 . 在表单中包装您的输入并添加 #f="ngForm"

    <form id="form-group" #f="ngForm" (ngSubmit)="onSubmit(f)"> 
  <div class="row">
    <div class="border rounded p-4 m-1" *ngFor="let type of types">
      <div *ngFor="let subType of subTypes[type]">
        <label for="{{subType}}SlotsInput">{{type | titlecase}} : {{subType}}</label>
        <div class="input-group mb-3">
          <div class="input-group-prepend">
            <button class="btn btn-outline-secondary" 
            type="button" (click)="decrement(inpt)">-</button>
            <button class="btn btn-outline-secondary" 
            type="button" (click)="increment(inpt)">+</button>
          </div>
          <input type="number" class="form-control" placeholder="0" id="{{subType}}SlotsInput"  min="0" max="10" [name]="type+subType" [value]="type+subType" ngModel #inpt="ngModel">
        </div>
      </div>
    </div>
  </div>
  <button type="submit">send</button>
</form>

    在component.ts中：

    //[...]
export class AppComponent  {
  types = ["dog", "horse", "hen", "elephant"];
  subTypes = {
    dog:["labrador", "vizsla"],
    horse:["arabian","shire","belgian"],
    hen:["plymouth rock", "leghorn", "bramha"],
    elephant:["african", "asian"]
  };

  onSubmit(form){
    console.log(form.form.value);
  }

  increment(input){
    input.control.setValue(parseInt( (input.control.value) || 0 ) +1 );
    console.log(input.control.value);
  }

  decrement(input){
    input.control.setValue(parseInt( (input.control.value) || 0 ) -1 );
    console.log(input.control.value);
  }

}

    stackblitz forked example

    回复于

相关问题