AngularJS动态表单无效答案

【问题标题】：AngularJS dynamic Form does not get validAngularJS动态表单无效
【发布时间】：2015-06-20 05:59:38
【问题描述】：

我在 AngularJS 中有一个动态表单，输入标签会根据用户选择的问题类型被替换。所以问题是，当用户将一个必需的输入标签留空并切换到另一种类型的问题时，表单仍然无效（即使当前表单是有效的）。

我正在为它添加JsFiddle，你会明白的。

HTML

<body ng-app="myApp" ng-controller="myCtrl">
<form name="myForm" novalidate>
    <div><input name='name' type='text' ng-model='name' ng-required='true' placeholder='name'></div>
    <div compile="myHtml"></div>
<input type="radio" ng-required='true' ng-click="addQuestion(1)" ng-model="radio" value="1"> Question 1 &amp; 3
<input type="radio" ng-required='true' ng-click="addQuestion(2)" ng-model="radio" value="2"> Question 2 &amp; 4
 <input type="submit" name="submit" ng-click="" ng-disabled="myForm.$invalid">   
</form>    
</body>

Javascript

// the main (app) module
var myApp = angular.module("myApp", []);

// add a controller
myApp.controller("myCtrl", function($scope) {
$scope.name = "John Doe";
$scope.myHtml = "";
$scope.radio="1";
$scope.question1 = 1;
$scope.question2 = 2;
$scope.question4 = 4;

$scope.addQuestion = function(id) {
    $scope.myHtml = "";
    if(id == 1) {
      $scope.myHtml += "<div><input name='question1' type='text' ng-model='question1' ng-required='true' placeholder='Question 1'></div>";
      $scope.myHtml += "<div><input name='question3' type='text' ng-model='question3' ng-required='true' placeholder='Question 3'></div>";
    };    
    if(id == 2) {
      $scope.myHtml += "<div><input name='question2' type='text' ng-model='question2' ng-required='true' placeholder='Question 2'></div>";  
      $scope.myHtml += "<div><input name='question4' type='text' ng-model='question4' ng-required='true' placeholder='Question 4'></div>";  
    };
};    
$scope.addQuestion(1);
});

// add a directive
myApp.directive('compile', ['$compile', function ($compile) {
return function(scope, element, attrs) {
    scope.$watch(
        function(scope) {
            // watch the 'compile' expression for changes
            return scope.$eval(attrs.compile);
        },
        function(value) {
            // when the 'compile' expression changes
            // assign it into the current DOM
            element.html(value);

            // compile the new DOM and link it to the current
            // scope.
            // NOTE: we only compile .childNodes so that
            // we don't get into infinite loop compiling ourselves
            $compile(element.contents())(scope);
        }
    );
};
}]);

用于问题的服务器 JSON

$scope.fields = [{
    "caption": "Gender",
        "questionType": "RADIO",
        "optionValues": ["Male", "Female"],
        "fieldPriority": "REQUIRED"
}, {
    "caption": "City",
        "questionType": "TEXT",
        "optionValues": "",
        "fieldPriority": "REQUIRED"
}, {
    "caption": "Address",
        "questionType": "PARAGRAPH_TEXT",
        "optionValues": "",
        "fieldPriority": "REQUIRED"
}, {
    "caption": "Nationality",
        "questionType": "LIST",
        "optionValues": ["Indian", "American"],
        "fieldPriority": "REQUIRED"
}, {
    "caption": "Tea/Coffee",
        "questionType": "CHECKBOX",
        "optionValues": ["Tea", "Coffee"],
        "fieldPriority": "REQUIRED"
}];

谢谢

【问题讨论】：

标签： angularjs angularjs-forms

【解决方案1】：

不要在控制器中存储平面 html。只需使用 ng-if 或 ng-show 来处理您的逻辑。

【讨论】：

感谢您的回答，我知道可以这样做，但我的表格更复杂。我只是用简单的形式重新创建了我的问题，只是为了给出这个想法。我不能使用 ng-if 或 ng-show。

【解决方案2】：

我会重构您的代码以使用 ng-include 而不是从控制器编译 html，这在 angularjs 中是完全错误的模式。

你可以根据radio值ng-model注入模板

<body ng-app="myApp" ng-controller="myCtrl">
    <form name="myForm" novalidate>
        <div>
            <input name='name' type='text' ng-model='name' ng-required='true' placeholder='name'/>
        </div>
        <div ng-include="'question-set-'+radio +'.html'"></div>
        <input type="radio" ng-required='true' ng-click="addQuestion(1)" ng-model="radio" value="1" />Question 1 &amp; 3
        <input type="radio" ng-required='true' ng-click="addQuestion(2)" ng-model="radio" value="2" />Question 2 &amp; 4
        <input type="submit" name="submit" ng-click="" ng-disabled="myForm.$invalid">
    </form>
</body>
<script type="text/ng-template" id="question-set-1.html">
    <div> <input name = 'question1' type='text' ng-model = 'question1' ng-required = 'true' placeholder = 'Question 1' /> </div>
    <div><input name='question3' type='text' ng-model='question3' ng-required='true' placeholder='Question 3'/> </div>
</script>
<script type="text/ng-template" id="question-set-2.html">
    <div><input name ='question2' type ='text' ng-model='question2' ng-required = 'true' placeholder = 'Question 2' /> </div>
    <div><input name='question4' type='text' ng-model='question4' ng-required='true' placeholder='Question 4'/> </div>
</script>

Working Fiddle

【讨论】：

我可以在ng-include里面调用函数吗？
@MrSuS 为什么不喜欢分离 html 逻辑？哪个更好
您的积分有效。我的问题是，服务器以JSON 的形式发送问题，我在想如何生成动态脚本内容。有什么建议吗？
@MrSuS 我能知道你是如何从服务器接收数据的吗？