Question

<div class="GuessWho">
    <input checked="checked" id="radio1" name="optradio" type="radio" value="0"> 
    <label class="radio-inline labtxt" for="radio1">Hans Zimmer</label> 
    <input id="radio2" name="optradio" type="radio" value="0"> 
    <label class="radio-inline labtxt" for="radio2">Ramin Djawadi</label> 
    <input id="radio3" name="optradio" type="radio" value="1"> 
    <label class="radio-inline labtxt" for="radio3">A.R. Rahman</label>
</div>

<a class="btn btn-success" (click)="guessWho()">Submit</a>

猜猜谁是[innerHTML]="funDetails?.LongDescription | safeHtml"

动态生成的

那么，在角度2 (value==1 is right answer otherwise fail)

点击提交按钮后，如何获得已检查无线电输入的值

Answer 1

您可以使用FormGroup将模型与表单绑定。例如：

<强> Component.ts

myForm: FormGroup;
ngOnInit() {
    this.addhtmltoform(model);
}
addhtmltoform(model: GuessWhoViewModel) {
    this.myFormOrganization = this.fb.group(
        {
            optradio: [model.optradio]

        });
}

guessWhoSave(data: GuessWhoViewModel) {
//Here you will get the value of optradio
    this._myService.guessWhoSave(data).subscribe();
}

<强> Component.html

<form [formGroup]="myForm" (ngSubmit)="guessWhoSave(myForm.value)">    
<div class="GuessWho">
<input checked="checked" id="radio1" name="optradio" formControlName="optradio" type="radio" value="0"> 
<label class="radio-inline labtxt" for="radio1">Hans Zimmer</label> 
<input id="radio2" name="optradio" formControlName="optradio" type="radio" value="0"> 
<label class="radio-inline labtxt" for="radio2">Ramin Djawadi</label> 
<input id="radio3" name="optradio" formControlName="optradio" type="radio" value="1"> 
<label class="radio-inline labtxt" for="radio3">A.R. Rahman</label>
</div>

<a class="btn btn-success" (click)="guessWhoSave()">Submit</a>
</form>

formControlName将自动处理双向绑定，您将在guessWhoSave（）方法中获取optradio的值

Answer 2

在html文件中写下以下代码

<form ngNativeValidate class="form-horizontal" #addForm="ngForm" (ngSubmit)="addUser(addForm.value)">
<div class="form-group">
    <label class="col-sm-12 control-label">User Type</label>
    <div class="i-checks">
        <label class="lbl-bb-qa"> 
            <input type="radio" [(ngModel)]="userType" value="0" name="userType" required> <i></i> userType1
        </label>
        <label class="lbl-sml-qa"> 
            <input type="radio" [(ngModel)]="userType" checked="" value="1" name="userType" required> <i></i> userType2
        </label>
        <label class="lbl-both-qa"> 
            <input type="radio" [(ngModel)]="userType" checked="" value="2" name="userType" required> <i></i> userType3
        </label>
    </div>
</div>
<div class="form-group">
    <div class="row">
        <button type="submit" class="btn-danger">Add User</button>
    </div>
</div>
</form>

使用

访问.ts文件中单选按钮的值

var user_type = formData.userType

如何从类referance角度2获取无线电名称值

2 个答案: