反应式表单 - 嵌入在标签中的单选按钮

我有一个问题，理解为什么在一种情况下，反应式表单不能按预期工作。反应式表单 - 嵌入在标签中的单选按钮

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

当我把标签一切正常外部的输入控制。

我需要做什么才能使这项工作适用于我的示例？

下面是代码：

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时，一切正常。

来源

2017-05-05 Thomas Geulen

你为什么要放个e标签内的输入？你可以使用一些这样的事<标签=“姓氏”>姓 –

正如我所说的。我在这里找到了一个很好看的例子[链接]（http://codepen.io/BrianSassaman/pen/iLrpC），我想在我的应用程序中使用它。因为我是Angular的新手，所以理解这样的事情对我来说很重要。 –

[我不能重现（https://plnkr.co/edit/8oSXK7tJH19KTjWG1u7M?p=preview）（只有一个'formControlName'指令，所以才有了第一个作品，但它确实更新....） – n00dl3

这可能是您的解决方案给表单控件名称到每个控制here you can find some extra stuff

 <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-05 09:00:29

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

<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-10 10:04:16 pantonis

反应式表单 - 嵌入在标签中的单选按钮

回答

相关问题