Develop Reference

angularjs form-button not validated or enabled

I have an angularjs form that pulls default data from scope. With the default data the form is expected to be validated and hence enable the button for submission but the reverse is the case except data is entered on the input field and this enables the button. here is the snippet
<div ng-controller="FormValidationController as frmValidationController" class="ui basic segment">
<form class="ui form" name="frmValidation" novalidate>
<div ng-class = "{'has-error':frmValidation.option1.$invalid && !frmValidation.option1.$pristine}"
class="required field">
<label>Selection</label>
<input ng-model="option" ng-minlength="3" formcontrol
name="option1" placeholder="Option" type="text"
class="ng-dirty ng-valid ng-touched" required>
<div _ngcontent-c5="" ngxerrors="option1">
<div class="input-error-message" ngxerror="validName" hidden="">
selection should be there
</div>
</div>
<p ng-show = "frmValidation.option1.$invalid && !frmValidation.option1.$pristine"
class = "input-error-message">required</p>
</div>
if the model has data, the button should be enabled on launch but this never happens and I want it to happen
<button ng-click="submit(); frmValidationController.submitForm(frmValidation.$valid)"
ng-disabled ="!frmValidation.$dirty || frmValidation.$invalid"
class="ui primary button" tabindex="0" type="submit">
Proceed
</button>

The problem is here:
ng-disabled ="!frmValidation.$dirty || frmValidation.$invalid"
Specifically:
!frmValidation.$dirty
The form is only dirty if an actually user has interacted with it. Because you're loading default data, the form is filled in correctly but the user has NOT touched or "dirtied" it.
Remove that check and it should work as expected I believe.

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.

Accesing $pristine property of input without form in Angular?

Say I have the following HTML...
<div class="row">
<div class="col-xs-3 align-right">
<p>Email</p>
</div>
<div class="col-xs-7">
<input type="text" class="form-control" ng-model="registrationForm.email.value"/>
<span class="error-label" ng-hide="registrationForm.email.valid"><span class="glyphicon glyphicon-remove"></span>Must be a valid email!</span>
</div>
</div>
This bit of HTML creates an email field, with an error label that is shown if the email provided is invalid. This works perfectly, and is not part of my question.
I would like to slightly alter the behavior of this label. When the user first visits the form, I don't want to display the error label unless the user has changed the value of the form input.
It seems like the $pristine and $dirty properties are the key, but I'm confused on how to go about using them. If I try to access them of properties of email.value (I.E. registrationForm.email.value.$pristine) the property seems to be undefined.
I would like to avoid enclosing these inputs in an HTML form. Is there still a way I can retain use of these properties, and if so, how?

When you create your <form> element, it will create a $scope variable with the name of your form. For example:
<form name="regForm">
<div class="row">
<div class="col-xs-3 align-right">
<p>Email</p>
</div>
<div class="col-xs-7">
<input type="text" class="form-control" name="email" ng-model="registrationForm.email.value"/>
<span class="error-label" ng-hide="registrationForm.email.valid"><span class="glyphicon glyphicon-remove"></span>Must be a valid email!</span>
</div>
</div>
</form>
You can access the $pristine using $scope.regForm.email.$pristine.
Without a <form>, simply use ng-form, which will give you the functionality of the form, without needing an actual <form> element. See this post for more information.

AngularJS - prevent submissions of form with required fields

I have an AngularJS Form with 3 required fields inside (using ng-required). Without touching anything on the form and just simply pressing the 'Submit' button (ng-click="submit"), how do I trigger validation for the required fields AND prevent form submission? I've tried doing:
ng-required="form.$submitted && !firstName"
which triggers the validation, but also submits the form even though the form is technically $invalid??

I would take a look at angular-validator: https://github.com/turinggroup/angular-validator. It is quite useful and really leans out your validation code. ng-Message is nice but you end up maintaining more HTML and therefore it seems it would be more watches.
<form name="categoryForm" id="categoryForm" class="smart-form" angular-validator angular-validator-submit="save(true)" novalidate autocomplete="off">
<fieldset>
<section ng-class="{ 'has-error' : categoryForm.title.$invalid}">
<label class="label">Title</label>
<label class="input">
<input name="title" type="text" ng-model="category.title" id="title" placeholder="Title" required
validate-on="dirty" required-message="'Title is required'">
</label>
</section>
<section ng-if="isAdmin()">
<div class="row">
<section class="col col-6" >
<label class="checkbox">
<input type="checkbox" name="checkbox" ng-model="category.isGlobal">
<i></i><span>Global</span></label>
</section>
</div>
</section>
</fieldset>
<footer>
<button type="submit" class="btn btn-primary" ng-disabled="(categoryForm.$dirty && categoryForm.$invalid) || categoryForm.$pristine">
Submit
</button>
</footer>
</form>

Since you mention that you are doing validation for individual elements and don't know to check whether the entire form is valid or not. You can use the following condition to check whether the form is valid or not
$scope.yourFormName.$valid
Use the above condition to check whether the form is valid or not. The above condition will become true only when all the required validations inside the form are valid. Hope this is what you're looking for

I used the ng-submit directive as it triggers form.$submitted and validates ng-required fields properly before submitting.
For the case where you have multiple buttons, for I added an ng-click to each button and simply changed a $scope variable (e.g. $scope.pressedBtn). In the function that ng-submit points to, you could do something like:
if ($scope.pressedBtn === 'button1') {
// submit
}
else if ($scope.pressedBtn === 'button2') {
// save
}

html form trying to http get when a button is pressed

Ive got a html form with a few select lists and a text box in it. I also have a submit button which is outside of the form. The reason for this is I want to construct the parameters myself, as I dont want the content of all of the select lists. The problem I am having is, that when I press my submit button,The form automaticly trys to redirect to the same page, but with a ? at the end with all the contents of the form. I am also having problems where window.location.href is not working inside the submit() javascript method, but I am not sure if this is caused by the form issue or not. Example code:
<form>
<input name="cName" type="text" class="input-xlarge" id="input01" placeholder=
"Enter title" />
<div class="control-group">
<hr />
<label class="control-label" for="select01">Select box 1</label>
<div class="controls">
<select id="select01" name="type" onChange="reportModification(this.value)">
<option>One</option>
</select>
</div>
</div>
</form>
<button class="btn btn-primary" onClick="next()">Next</button>
This is not the exact code from the page, just a replica.So it might not be valid html in some places. Thanks for the help :)

The reason you get parameters in the url is that a get request is used instead of a post request. you should use:
<form method="POST" action="">
Also why is your button outside the form? you could have this instead:
</div>
<input class="btn btn-primary" type="submit" value="Next" onClick="next()" />
</form>

I think your button has to be inside the form element. You could use an onsubmit in the form element to intercept the form before it gets sent to the server. Here you could manipulate the values before they go. You would also need an action attribute in the form. If your function returns true, the data will be submitted, false and it won't.