我尝试使用来自JSON的数据在AngularJS中创建动态表单.我有这个工作:
HTML
<p ng-repeat="field in formFields">
<input
dynamic-name="field.name"
type="{{ field.type }}"
placeholder="{{ field.name }}"
ng-model="field.value"
required
>
<span ng-show="myForm.{{field.name}}.$dirty && myForm.{{field.name}}.$error.required">Required!</span>
<span ng-show="myForm.{{field.name}}.$dirty && myForm.{{field.name}}.$error.email">Not email!</span>
</p>
<button ng-disabled="myForm.$invalid">Submit</button>
</form>
Run Code Online (Sandbox Code Playgroud)
JS
angular.module('angularTestingApp').controller('DynamicFormCtrl', function ($scope) {
$scope.formFields = [
{
name: 'firstName',
type: 'text'
},
{
name: 'email',
type: 'email'
},
{
name: 'password',
type: 'password'
},
{
name: 'secondName',
type: 'text'
}
];}).directive("dynamicName",function($compile){
return {
restrict:"A",
terminal:true,
priority:1000,
link:function(scope,element,attrs){
element.attr('name', scope.$eval(attrs.dynamicName));
element.removeAttr("dynamic-name");
$compile(element)(scope);
}
}});
Run Code Online (Sandbox Code Playgroud)
这段代码有效,但问题是我不知道如何添加动态复选框或核对表以及如何在表单内部进行验证,如下所示: …