JSON 데이터의 동적 형식(다른 유형)

JSON 데이터의 동적 형식(다른 유형)

Angular에서 역동적인 형태를 만들려고 합니다.JS는 JSON의 데이터를 사용합니다.난 이걸 할 수 있어:

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>

자바스크립트

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);
    }
}});

이 코드는 동작합니다만, 문제는 동적 체크 박스나 체크 리스트를 추가하는 방법과 폼내에서 검증하는 방법을 모른다는 것입니다.이러한 방법은 다음과 같습니다.

angular.module('angularTestingApp')
.controller('DynamicFormCtrl', function ($scope) {

$scope.formFields = [
    {
        name: 'firstName',
        type: 'text'
    },
    {
        name: 'email',
        type: 'email'
    },
    {
        name: 'password',
        type: 'password'
    },
    {
        name: 'city',
        type: 'checkbox',
        choices: [
            { name: "red" },
            { name: "blue" },
            { name: "green" },
        ]
    }
];})

나는 내 문제를 해결했다.

이 링크는 각도에서의 검증을 수반하는 동적 폼의 1개의 예와 함께 플렁커 링크입니다.JS

http://plnkr.co/edit/kqiheTEoGDQxAoQV3wxu?p=preview

.disclosed(비활성화)

 <form name="myForm" class="form-horizontal" role="form" ng-submit="submitForm()">
 <div ng-repeat="field in entity.fields">    
  <ng-form name="form">
    <!-- TEXT FIELDS -->
    <div ng-if="field.type=='text'" class="form-group">
      <label class="col-sm-2 control-label">{{field.label}}</label>
      <div class="col-sm-6">
        <input type="{{ field.type }}" dynamic-name="field.name" id="{{field.name}}" data-ng-model="field.data"  class="form-control" required/>
         <!--<span ng-show="myForm.{{field.name}}.$dirty && myForm.{{field.name}}.$error.required">Required!</span>.-->
         <span  data-ng-show=" {{'form.'+field.name+'.$dirty && form.'+field.name+'.$error.required'}}">Required!</span>
      </div>
    </div>

    <!-- EMAIL FIELDS -->
    <div ng-if="field.type=='email'" class="form-group">
      <label class="col-sm-2 control-label">{{field.label}}</label>
      <div class="col-sm-6">
        <input type="{{ field.type }}" dynamic-name="field.name" data-ng-model="field.data" class="form-control" required/>
         <span data-ng-show=" {{'form.'+field.name+'.$dirty && form.'+field.name+'.$error.required'}}">Required!</span>
         <span data-ng-show=" {{'form.'+field.name+'.$dirty && form.'+field.name+'.$error.email'}}">Not email!</span>
      </div>
    </div>

    <!-- PASSWORD FIELDS -->
    <div ng-if="field.type=='password'" class="form-group" >
      <label class="col-sm-2 control-label">{{field.label}}</label>
      <div class="col-sm-6">
        <input type="{{ field.type }}" dynamic-name="field.name" data-ng-model="field.data" ng-minlength={{field.min}} ng-maxlength={{field.max}} class="form-control" required/>
         <span data-ng-show=" {{'form.'+field.name+'.$dirty && form.'+field.name+'.$error.required'}}">Required!</span>
         <span data-ng-show=" {{'!form.'+field.name+'.required && (form.'+field.name+'.$error.minlength || form.'+field.name+'.$error.maxlength)' }}">Passwords must be between 8 and 20 characters.</span>
        </div>
    </div>

    <!-- SELECT FIELDS -->
    <div ng-if="field.type=='select'" class="form-group" >
      <label class="col-sm-2 control-label">{{field.label}}</label>
      <div class="col-sm-6">
        <select data-ng-model="field.data" ng-options="option.name for option in field.options" class="form-control" required/>
      </div>      
    </div>

    <!-- RADIO FIELDS -->
    <div ng-if="field.type=='radio'" class="form-group">
      <label class="col-sm-2 control-label">{{field.label}}</label>
      <div class="col-sm-6">

        <div class="checkbox" ng-repeat="option in field.options" >
                  <label>                
            <input type="radio" data-ng-model="field.data"  name="taskGroup"  id="{{option.name}}" value="{{option.id}}">{{option.name}}
          </label>
                </div>
      </div>
    </div>

    <!-- CHECKBOX FIELDS -->
    <div ng-if="field.type=='checkbox'" class="form-group" >
      <label class="col-sm-2 control-label">{{field.label}}</label>
      <div class="col-sm-6">        
               <div class="checkbox" ng-repeat="option in field.options" >
                  <label>
                    <input type="checkbox" data-ng-model="option.data"  name="taskGroup"  id="{{option.name}}" value="{{option.id}}" >{{option.name}}
                  </label>
                </div>

      </div>
    </div>

  </ng-form>

 </div>


  <br/>
  <button ng-disabled="myForm.$invalid" type="submit" id="submit">Submit</button>
  <br/>
  <pre>{{entity|json}}</pre>
   <br/>

 </form>

.disclosed(비활성화)

app.controller('DynamicFormController', function ($scope, $log) {



    // we would get this from the api
    $scope.entity = {
      name : "Course", 
      fields :
        [
          {type: "text", name: "firstname", label: "Name" , required: true, data:""},
          {type: "radio", name: "color_id", label: "Colors" , options:[{id: 1, name: "orange"},{id: 2, name: "pink"},{id: 3, name: "gray"},{id: 4, name: "cyan"}], required: true, data:""},
          {type: "email", name: "emailUser", label: "Email" , required: true, data:""},
          {type: "text", name: "city", label: "City" , required: true, data:""},
          {type: "password", name: "pass", label: "Password" , min: 6, max:20, required: true, data:""},
          {type: "select", name: "teacher_id", label: "Teacher" , options:[{name: "Mark"},{name: "Claire"},{name: "Daniel"},{name: "Gary"}], required: true, data:""},
          {type: "checkbox", name: "car_id", label: "Cars" , options:[{id: 1, name: "bmw"},{id: 2, name: "audi"},{id: 3, name: "porche"},{id: 4, name: "jaguar"}], required: true, data:""}
        ]
      };

      $scope.submitForm = function(){
        $log.debug($scope.entity);
      }
})

  .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);
        }
    }
})

ngIf를 사용하여 체크박스를 표시할지 텍스트 입력을 표시할지 여부를 알 수 있습니다.다음은 예를 제시하겠습니다.

<p ng-repeat="field in formFields">
        <input 
            ng-if="field.type != 'checkbox'"
            dynamic-name="field.name"
            type="{{ field.type }}"
            placeholder="{{ field.name }}"
            ng-model="field.value"
            required
        >
        <input
            ng-if="field.type == 'checkbox'"
            ng-repeat="choice in choices"
            type="checkbox"
            dynamic-name="field.name"
            ng-value="choice.name"
        >
        <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>  

http://angular-formly.com/ #/ 를 사용하는 것은, JSON 모델 생성 HTML 폼의 요구에 맞추어 커스터마이즈 할 수 없는 것입니까.

언급URL : https://stackoverflow.com/questions/24248098/dynamic-form-from-json-data-different-types