2

我很难理解为什么在一种情况下 Reactive Forms 不能按预期工作。

我的模板中有一个带有单选按钮的按钮组，每个输入都嵌套在一个标签中。当我选择一个单选按钮时FormControl，我的相应单选按钮FormGroup不会更新。

当我将输入控件放在标签之外时，一切都按预期工作。

我必须做些什么才能使这个工作适用于我的示例？

这是代码：

app.component.html ：

<div [formGroup]="testForm">
  <div class="row">
    <div class="col-xs-12">
      <div class="btn-group" data-toggle="buttons">
        <label class="btn active">
          <input type="radio" value="0" name="regularity" formControlName="regularity" checked>
          <i class="fa fa-circle-o fa-2x"></i>
          <i class="fa fa-dot-circle-o fa-2x"></i>
          <span>1 W</span>
        </label>
        <label class="btn active">
          <input type="radio" value="1" name="regularity" >
          <i class="fa fa-circle-o fa-2x"></i>
          <i class="fa fa-dot-circle-o fa-2x"></i>
          <span>2 W</span>
        </label>
        <label class="btn active">
          <input type="radio" value="2" name="regularity" >
          <i class="fa fa-circle-o fa-2x"></i>
          <i class="fa fa-dot-circle-o fa-2x"></i>
          <span>1 M</span>
        </label>
        <label class="btn active">
          <input type="radio" value="3" name="regularity" >
          <i class="fa fa-circle-o fa-2x"></i>
          <i class="fa fa-dot-circle-o fa-2x"></i>
          <span>3 M</span>
        </label>
        <label class="btn active">
          <input type="radio" value="4" name="regularity" >
          <i class="fa fa-circle-o fa-2x"></i>
          <i class="fa fa-dot-circle-o fa-2x"></i>
          <span>6 M</span>
        </label>
        <label class="btn active">
          <input type="radio" value="5" name="regularity" >
          <i class="fa fa-circle-o fa-2x"></i>
          <i class="fa fa-dot-circle-o fa-2x"></i>
          <span>1 Y</span>
        </label>
      </div>
    </div>
  </div>
</div>
{{testForm.value|json}}

app.component.ts ：

import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from "@angular/forms";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  private testForm: FormGroup;
  constructor(private _fb: FormBuilder) {
    this.testForm = _fb.group({
      regularity: ''
    });
  }
  title = 'app works!';
}

编辑：显然使用 jQuery 存在问题。当我从 .angular-cli.json 中删除 jQuery 时，一切正常。

4

2 回答 2

0

虽然这不是最佳实践，但我做了一个临时解决方法：

<label class="btn active" (click)="setValue('3')>
          <input type="radio" value="3" formControlName="regularity">
</label

在打字稿中：

import { Component } from '@angular/core';
import { FormBuilder, FormControl, FormGroup } from "@angular/forms";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  private testForm: FormGroup;
  private regularity: FormControl

  ngOnInit(){
     this.buttonsPlatform = new FormControl();
     this.testForm= new FormGroup({
            regularity: this.regularity,
     });
   }

    title = 'app works!';

    public setValue(newValue) : void(){
       this.regularity.setValue(newValue);
    }
}
于 2017-05-10T10:04:16.193 回答
0

这可能是您的解决方案，为每个控件提供表单控件名称，您可以在这里找到一些额外的东西

      <input type="radio" formControlName="food" value="beef" > Beef
      <input type="radio" formControlName="food" value="lamb"> Lamb
      <input type="radio" formControlName="food" value="fish"> Fish
于 2017-05-05T09:00:29.810 回答