单击角度无线电输入时没有填充模型的问题

时间:2015-07-15 20:35:46

标签: angularjs

我有一个奇怪的问题,无线电输入没有填充角形的模型。

除了无线电输入......

之外,所有字段都填充模型

收音机输入在下面表格的开头给出。我使用ng-inspector,我可以看到当我点击其中一个无线电值时,不会填充signupForm.member.role。

有人可以帮忙吗?

<form name="formCtrl" ng-submit="signup(formCtrl)" class="col-xs-12" novalidate role="form">
    <h4>{{'SIGNUP_FORM_ROLE_PREFIX' | translate}}</h4>
    <div class="btn-group Choix col-xs-12 text-center" data-toggle="buttons" ng-class="getCssClasses(formCtrl, formCtrl.signupRole)">
        <label class="btn StateButton col-xs-6">
            <img class="img-responsive" src="assets/media/img/parents.svg" />
            <input type="radio" name="signupRole" ng-model="signupForm.member.role" value="ROLE_BASIC_PARENTS" ng-required="true" />
            <span class="help-block">{{'DOMAIN_ENUM_' + 'ROLE_BASIC_PARENTS' | translate}}</span>
        </label>
        <label class="btn StateButton col-xs-6">
            <img class="img-responsive" src="assets/media/img/professionel.svg" />
            <input type="radio" name="signupRole" ng-model="signupForm.member.role" value="ROLE_BASIC_CHILDCARE_WORKER" ng-required="true" />
            <span class="help-block">{{'DOMAIN_ENUM_' + 'ROLE_BASIC_CHILDCARE_WORKER' | translate}}</span>
        </label>
        <div ng-messages="formCtrl.signupRole.$error" ng-if="formCtrl.$submitted">
            <div ng-message="required" class="control-label">{{'SIGNUP_FORM_ROLE_REQUIRED'| translate}}</div>
        </div>
    </div>
    <hr>
    <div class="form-group" ng-class="getCssClasses(formCtrl, formCtrl.firstName)">
        <div class="input-group">
            <span class="input-group-addon">
                                   <span class="glyphicon icon-Prenom" aria-hidden="true"></span>
            </span>
            <input type="text" name="firstName" ng-minlength="2" placeholder="{{'SIGNUP_FORM_FIRST_NAME' | translate}}" ng-model="signupForm.member.firstName" ng-required="true" class="form-control" />
            <span ng-if="isSuccessFeedback(formCtrl, formCtrl.firstName)" class="form-control-feedback" aria-hidden="true"><span class="glyphicon icon-Valid" aria-hidden="true"></span></span>
            <span ng-if="isErrorFeedback(formCtrl, formCtrl.firstName)" class="form-control-feedback" aria-hidden="true"><span class="glyphicon icon-Erreur" aria-hidden="true"></span></span>
        </div>
        <div ng-messages="formCtrl.firstName.$error" ng-if="formCtrl.$submitted">
            <div ng-message="required" class="control-label">{{'SIGNUP_FORM_FIRST_NAME_REQUIRED' | translate}}</div>
            <div ng-message="minlength" class="control-label">{{'SIGNUP_FORM_FIRST_NAME_REQUIRED' | translate }}</div>
        </div>
    </div>
</form>

这是一个工作的掠夺者:http://plnkr.co/edit/lsaevbL0mBRku7zcrGDJ

人们可以注意到,即使选择了其中一个无线电,提交表格时也不会考虑收音机......

1 个答案:

答案 0 :(得分:0)

只需使用value代替ng-value。请参阅此工作演示:http://plnkr.co/edit/2EB4NvTO1StN50NIXOyn?p=preview

您不应该使用ng-value,它正在寻找$scope.ROLE_BASIC_PARENTS

检查AngularJS.org,使用的示例:

<input type="radio" ng-model="color.name" ng-value="specialValue">

在控制器中:

$scope.specialValue = {
    "id": "12345",
    "value": "green"
  };