反應式表單 - 嵌入在標籤中的單選按鈕

我有一個問題，理解爲什麼在一種情況下，反應式表單不能按預期工作。反應式表單 - 嵌入在標籤中的單選按鈕

我的模板中有一個按鈕組，其中每個輸入嵌套在一個標籤中。當我選擇一個單選按鈕時，我的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

反應式表單 - 嵌入在標籤中的單選按鈕

回答

相關問題