Javascript-форум (https://javascript.ru/forum/)
-   Angular.js (https://javascript.ru/forum/angular/)
-   -   Обход динамической формы (https://javascript.ru/forum/angular/63423-obkhod-dinamicheskojj-formy.html)

kaang 06.06.2016 22:34

Обход динамической формы
 
Здравствуйте! На странице в зависимости от входящих с сервера данных формируется форма с разного типа инпутами. Возникло 2 проблемы:
1. Так как нет возможности работать с элементами формы через имена то не совсем понятно как эту форму валидировать.
2. данные на сервер отпрявляются через сервис который принимает их в определенном формате:
{
“ThreadId”:[int],
“QuestionId”:[int],
“ResponseText”:”[string]”,
“OptionId”:[int],
“ColumnId”:[int],
“FileId”:[int],
“SortOrder”:[int]
}
и это нужно сформировать для каждого элемента формы. Возникли трудности с формированием такого массива данных. пробую через директиву, но не все получается пока. Не совсем понятно как можно используя angular обойти все элементы формы.

небольшой пример элементов формы:
<!--text box QuestionTypeId === 1 -->
              <div class="input-holder text-input validate" ng-if="question.QuestionTypeId === 1">
                <p class="quest"><strong>{{question.QuestionText}}</strong></p>

                <div class="form-group">
                  <input type="text"
                         class="form-control input has-help-txt"
                         placeholder="Write text here.."
                         required
                         fix-input-name=""
                         name="{{question.QuestionId}}"
                         ng-model="name.ResponseText"

                         init-respond=""
                         threadid="threadID"
                         questionid="question.QuestionId"
                         responsetext="name.ResponseText"
                         optionid="0"
                         columnid="0"
                         fileid="0"
                         sortorder="0"
                         elemindex="$index">
                  <!--<span class="error-message">This field is required</span>-->
                </div>
              </div><!--text input-->

              <!--radio QuestionTypeId === 6 -->
              <div class="radio-input input-holder validate" ng-if="question.QuestionTypeId === 6">
                <p class="quest"><strong>{{question.QuestionText}}</strong></p>
                <div class="row">
                  <div class="col-md-2 col-xs-3 text-center" ng-repeat="img in question.QuestionOptions">
                    <img class="img-responsive radio-img" src="{{img.File.FileURL}}" class="img-rounded">

                    <div class="radio text-center">
                      <input type="radio"
                             id="{{question.QuestionId}}"
                             value="{{img.File.FileId}}"
                             required
                             fix-input-name=""
                             name="{{question.QuestionId}}"
                             ng-model="name.OptionId"
                             init-respond=""
                             threadid="threadID"
                             questionid="question.QuestionId"
                             responsetext=""
                             optionid="question.QuestionId"
                             columnid="0"
                             fileid="name.OptionId"
                             sortorder="0"
                             elemindex="$index">
                      <label for="{{question.QuestionId}}"></label>
                    </div>
                  </div>

                  <div class="clearfix"></div>
                </div>
                <br>
                <span class="error-message">This is an error message</span>
              </div><!--end radio QuestionTypeId === 6 -->


Буду очень признателен за любую подсказку. Заранее спасибо.

inv0 07.06.2016 13:24

а вот так не работает?
<span class="error-message" ng-show="form[question.QuestionId].$error.required">This field is required</span>


Часовой пояс GMT +3, время: 17:53.