How to serialize form in angular for $http?

Question

JavaScript

I have inputs in the form that are generated on the fly, so I can’t just bandage them with ng-model + I would like not to write too much, but to do everything elegantly and beautifully, as it is done in jquery. In general, the point is, how to just take a form and serialize it, or how to take ajax from jquery and implement it in angular?

PS: this is not the first disappointment in angular, during the time that I wrote the request I could write native xmlHttpRequest requests of 10 pieces probably, maybe I can’t catch up with the chips, if it’s not difficult to remember, throw off some resources that open your eyes to the masterpiece of angular

{!! Form::model($article, ['method' => 'PATCH', 'action' => ['[email protected]', $article->id], 'ng-controller' => 'editFormController', 'name' => 'editForm', 'class' => "rg-form", 'ng-submit' => 'editTheArticle($event, ' . $article->id . ')']) !!}

    <div class="form-group">
      
      <div class="required info ng-hide" ng-show="editForm.title.$error.required">Required field</div>
      <div class="required ng-hide" ng-show="editForm.title.$error.minlength && editForm.title.$dirty">Must be at least 3 simbols long</div>
      <div class="required ng-hide" ng-show="editForm.title.$error.maxlength && editForm.title.$dirty">Can't be more than 250 simbols</div>
      {!! Form::label('title', 'Title*:') !!}
      {!! Form::text('title', null, ['class' => 'form-control',
                      'ng-model' => "title",
                      'required',
                      'ng-minlength' => '3',
                      'ng-maxlength' => '250',
                      'use-form-data'								  		
      ]) !!}
    </div>

    <div class="form-group">
  
      <div class="required info ng-hide" ng-show="editForm.body.$error.required">Required field</div>
      <div class="required ng-hide" ng-show="editForm.body.$error.minlength && editForm.body.$dirty">Must be at least 400 simbols long</div>
      {!! Form::label('body', 'Body*:') !!}
      {!! Form::textarea('body', null, ['class' => 'form-control',
                        'ng-model' => 'body',
                        'required',
                        'ng-minlength' => '400',
                        'use-form-data'
      ]) !!}
    </div>

    <div class="form-group">
      {!! Form::label('tags', 'Tags:') !!}
      {!! Form::select('tags[]', \App\Tag::lists('name', 'id'), $article->tags()->lists('id')->toArray(), ['class' => 'form-control select2', 'multiple' => 'multiple']) !!}
    </div>

    <div class="form-group">
      {!! Form::submit('Edit', ['class' => 'btn btn-primary form-control',
                          'ng-disabled' => 'editForm.$invalid'
      ]) !!}
    </div>

  {!! Form::close() !!}

Answer 1

I can't just bandage them with ng-model

Why can't you? More than you can. And it would be even better to use some kind of form builder, something like angular formly
Given how you use it, then yes, it's no wonder. Let me explain - you are not even trying to rethink the approaches to development. For you, angular is about the same as jquery.

Answer 2

JSON.stringify()