How to put form validation in angularjs - javascript

I have form like below,
<div ng-if="vm.settingsObj.others.name === 'Course Specialization'">
<div class="form-group">
<div class="col-xs-12" ng-repeat="specialization in vm.settingsObj.course_specialization">
<div class="row">
<div class="form-group col-sm-8" >
<input name="course_specialization{{$index}}" class="form-control" placeholder="Course Specialization" ng-model="specialization.value" >
</div>
<div class="form-group col-sm-4">
<button ng-click="vm.removeStatus('course_specialization',$index)" class="btn btn-danger">Remove</button>
</div>
</div>
</div>
</div>
<div class="form-group">
<button class="btn btn-blue" ng-click="vm.addStatus('course_specialization')" >ADD</button>
</div>
</div>
Here i am incrementing the input field when i click on 'Add' button but when i leave input fields as empty and click on save it is getting saved.So what i need is form validation when my field is empty.Can anyone please help me.Thanks.

You have to wrap all inputs in a single form tag so that you can use angular form validation. Angular provides a well set of validations using classes and form controller and you should go for that. For more information you can find a reference from below links:
link one
or for a overview you can follow
link two

Related

What's the easiest way to generate forms using laravel and js?

I have form when user can add achievement.
So it looks like:
<form action="{{ action('SettingsController#addAchievementsSettings') }}" method="post" class="form-horizontal">
{{ csrf_field() }}
<div class="form-group">
<label class="col-lg-2 control-label">Date</label>
<div class="col-lg-6">
<input type="date" placeholder=" " id="date-achievement" name="date_achievement" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label">What</label>
<div class="col-lg-6">
<input type="text" placeholder=" " id="what-achievement" name="what_achievement" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label">Description</label>
<div class="col-lg-10">
<textarea rows="10" cols="30" class="form-control" id="description_achievement" name="description_achievement"></textarea>
</div>
</div>
<button type="button" class="btn btn-warning">Add one more...</button>
<button type="submit" class="btn btn-success">Save</button>
I want to generate another form if somebody click Add one more. How can I reach this and how to add everything to database? Sorry guys for not more code but I do not have any idea
from your question it seems a proper video / tutorial would help you more than just the answer.
for generation I personally use laravelcollective/html.
a good site with lots of videos explaining almost everything in regards to laravel and building sites with it I recomment the laracasts site.
to learn how to build and process forms with laravel I suggest Laravel 5.4 from scratch
specifically for working with forms: Form request data and form validation
After creating your form and submitting your form , you have to validate your data then you will call your model to insert your date in database, i suggest you eloquent to handle database request if you are using laravel

AngularJS ng-disabled - Not working if input $pristine, but works if form $pristine

I'm trying to disable a materializecss button if the value of a particular input in a form is blank, but I can only successfully disable it using ng-disable if the form is $pristine, not on the input.
This works:
data-ng-disabled="mainDetailsForm.$pristine"
but this doesn't:
data-ng-disabled="mainDetailsForm.niNumberInput.$pristine"
and this doesn't:
data-ng-disabled="niNumberInput.$pristine"
-
JSFiddle: https://jsfiddle.net/6qswosh8/.
-
Full HTML:
<form id="mainDetailsForm" name="mainDetailsForm">
<div class="row">
<div input-field class="input-field col-xs-12 col-md-4">
<input id="niNumberInput" name="niNumberInput" type="text" class="validate" pattern=".{9}" placeholder="National Insurance Number">
<label for="niNumberInput" data-error="National Insurance number must be 9 characters long">National Insurance Number</label>
</div>
<div input-field class="input-field col-xs-12 col-md-1">
<button data-ng-disabled="mainDetailsForm.niNumberInput.$pristine" class="btn button waves-effect"><span class="fa fa-search"></span>Verify</button>
</div>
</div>
</form>
To access the properties of individual inputs through the form you need to give the input an ng-model. The ng-model property is what binds it. I updated your jsfiddle https://jsfiddle.net/dougefresh/6qswosh8/1/ ( I also had to get angular working properly in the fiddle).
<input id="niNumberInput" name="niNumberInput" ng-model="niNumberInput" type="text" class="validate" pattern=".{9}" placeholder="National Insurance Number">
This small line in the docs is important "To allow styling of form as well as controls, ngModel adds these CSS classes:" It lists $dirty, $pristine, etc.. The docs specifically say they are bound to ng-model.
https://docs.angularjs.org/guide/forms

How can I clear fields after submit?

I'm trying to reset the values of the fields after sending the data. Does anyone have a hint how can I clear the fields using javascript?
<div class="form-group">
<label>Código da Matéria</label>
<input required class="form-control" type="text" name="codigoMateria"/>
</div>
<div class="form-group">
<label>Nome</label>
<input required class="form-control" type="text" name="nome"/>
</div>
</div>
<div class="row text-left">
<div class="col-md-4 col-md-offset-4">
<button type="button" class="btn btn-primary btn-block">Salvar</button>
Like Jaromanda said there is a reset method for form elements.
To use it you will need to already have a correct form. Then you’re talking about sending the data. For this you need a submit button.
After this to reset your content you can bind the submit event with a function which use the reset method for your form.
here is a fiddle: https://jsfiddle.net/r56nvn51/1/
If you use the input element with the submit type attribute it will send the data and the reset the page which resets the inputs.
Aside from doing that you will need to add some script.
And you do not need the type in your button element.

AngularJS : form validation not working on hidden input

I have a form splitted in 4 steps (I made a form "wizard" using ng-switch), the submit button is on the last page of the wizard. I have some troubles making the angular form validation to work . It seems that the formName.$invalid only watches the inputs of the current step of the form.
<form name="carouselForm">
<div ng-switch="modal.getCurrentStep()" class="slide-frame">
<div ng-switch-when="general" class="wave row">
....
</div>
<div ng-switch-when="carousel" class="wave row">
<div class="col-md-12">
<div class="form-group"
ng-class="">
<label for="Title">
Title <span class="red">*</span>
</label>
<div>
<input id="Title"
ng-model="entityData.Title"
type="text"
required
placeholder="" class="form-control input-md">
</div>
</div>
</div>
</div>
<div ng-switch-when="details" class="wave row">
.....
</div>
<div ng-switch-when="description" class="wave row">
.....
</div>
</div>
</form>
I removed most of the form cause it would have been very long. In step two I left an input with the required tag. On this step the carouselForm.$invalid is properly set to true if this field is not set, but as soon as I change to the next step, carouselForm.$invalid is false again even if I didn't filled the required input.
It seems that the angular form validation doesn't watch the inputs in my other ng-switch block. Is there a way to make include them into the validation ?
Thank you very much !
You can replace ng-switch-when by ng-show, that way it doesn't get removed from the DOM, but is hidden using CSS.

Angularjs.copy does not save to db?

I have a credit card form with a btn that pulls the address from the database (Use home address), its working in the sense that it shows up inside of the textfield but when saving the form, this textfield turns up empty in the db. Anyone got any feedback?
<div class="row clearfix">
<div class="col-md-12 column">
<div class="form-group">
<button href="" ng-click="getAddress(user)" value="Show" class="btn btn-general btn-xs">Use Home Address</button>
<input type="text" data-vkeysinput="" class="form-control" value="{{copyAddress}}"/>
</div>
</div>
</div>
$scope.getAddress = function(user) {
$scope.copyAddress= angular.copy(user.user_address.address_1);
};
angular.copy have absolutely nothing to do with a database.
AngularJS can't even talk to a database - you need some kind of backend to support that.

Categories

Resources