Question

我尝试在Angular中构建一个计数器作为ReactiveForm来生成一个JSON字符串，我想将其发送到另一个表单以继续购买过程。

我的计数器工作正常，但是没有输入字段我没有将值输入字符串。但我不希望为用户提供输入字段。

我目前的FormGroup代码如下所示：

<div formGroupName="ticket">
    <div class="row">
      <p>Adults</p>
      <i class="fa fa-minus-circle fa-2x" aria-hidden="true" (click)="decrementAdult();"></i>
      <p formControlName="valueAdult" ngDefaultControl>{{counterValueAdult}}</p>
      <i class="fa fa-plus-circle fa-2x" aria-hidden="true" (click)="incrementAdult();"></i>
    </div>
    <div> ... same for children ... </div>
  </div>

在request.component.ts文件中，我有一个FormGroup：

requestForm = new FormGroup({
  foo1: new FormControl(),
  foo2: new FormControl(),
  ticket: new FormGroup({
    valueAdult: new FormControl(),
    valueChildren: new FormControl()
  })
});
incrementAdult() {
  this.counterValueAdult +=1;
  if (this.counterValueAdult >= this.maxAdult)
    this.counterValueAdult = 4;
    this.requestForm.get('ticket.valueAdult').setValue = this.counterValueAdult;
}
decrementAdult() {
  this.counterValueAdult -=1;
  if (this.counterValueAdult <= this.minAdult)
    this.counterValueAdult = 1;
    this.requestForm.get('ticket.valueAdult').setValue = this.counterValueAdult;
}

在表格的最后，我抓住了改进的输入：

 <p>{{ requestForm.value | json }}</p>

并返回：{“foo1”：value，“foo2”：value，“ticket”：{“valueAdult”：null，“valueChildren”：null}}

有没有人有想法取回括号之间的值而不是null？

<p ... >{{...}}</p>

Answer 1

你可以使用

ticket.get('valueAdult').value

无论如何，为什么要使用reactiveForm？你不需要它，只是

@Component({
  selector: 'bla-bla',
  template: '<p>ticket.adults</p>'
})
export class HeroDetailComponent1 {
  ticket:any={"adults":3};
}

Answer 2

您只需要使用增量/减量方法中的计算值更新valueAdult的值。

incrementAdult(){
  // as before
   this.requestForm.get('ticket').get('valueAdult').setValue = this.counterValueAdult;
   // or  this.requestForm.get('ticket.valueAdult').setValue = this.counterValueAdult;
}

decrementAdult(){
  // as before
   this.requestForm.get('ticket').get('valueAdult').setValue = this.counterValueAdult;
}

Angular ReactiveForm formControl计数器

2 个答案: