如何使用Reactive形式設置單選按鈕值？

這裏是我的組件類，我嘗試將表單單選按鈕值設置爲1：如何使用Reactive形式設置單選按鈕值？

import { FormGroup, FormControl } from '@angular/forms'; 

export class myComponent implements OnInit{ 
    pageForm: FormGroup; 

    ngOnInit() { 
     this.pageForm = new FormGroup({ 
      'gndr': new FormControl(1) 
     }); 
    } 
}

但頁面加載時的單選按鈕沒有被設置爲男性，而兩種選擇空白：

<div class="form-group"> 
    <label for="gender">Gender</label> 
    <div class="radio"> 
     <label> 
      <input type="radio" name="gndr" formControlName="gndr" value=1>Male 
     </label> 
    </div> 
    <div class="radio"> 
     <label> 
      <input type="radio" name="gndr" formControlName="gndr" value=0>Female 
     </label> 
    </div> 
</div>

那麼如何從我的組件類加載單選按鈕值？

來源

2017-10-12 John Glabb

如果您希望手動默認檢查其中一個，您可以添加「checked」標記，例如

<div class="radio"> 
    <label> 
     <input type="radio" name="gndr" formControlName="gndr" value=1 checked>Male 
    </label> 
</div> 
<div class="radio"> 
    <label> 
     <input type="radio" name="gndr" formControlName="gndr" value=0>Female 
    </label> 
</div>

編輯

如果你想使用默認值作爲字符串類型，在FormControl設置：

component.ts

this.pageForm = new FormGroup({ 
     'gndr': new FormControl('1') 
    });

component.html

... 
<input type="radio" formControlName="gndr" value=1> 
...

如果你想使用默認值作爲型號，在FormControl設置：

component.ts

this.pageForm = new FormGroup({ 
     'gndr': new FormControl(1) 
    });

component.html

... 
<input type="radio" formControlName="gndr" [value]=1> 
...

來源

2017-10-12 23:56:59 Andresson

是的，但我該怎麼辦從基於FormControl的組件類設置它： 'gndr'：new FormC ontrol（1）...我認爲它應該設置檢查參數。有沒有sence使用FormControl和硬編碼在HTML –

啊抱歉誤解，這應該工作''gndr'：新的FormControl（'1'）' – Andresson

不知道如果你想要的值是類型的字符串，就像你建議在你的HTML視圖中..但是這並沒有任何意義的字符串類型爲1和0.所以，如果你喜歡，你可以在輸入中將'value = 1'和'value = 0'的模板語法改爲'[value] = 1'和'[value] = 0'。確保這些值是類型編號。然後它應該與你原來的''gndr'一起工作：新的FormControl（1）' – Andresson

如何使用Reactive形式設置單選按鈕值？

回答

相關問題