I have a small search bar which is hidden initally. With a ng-click i set "filter.show" to true and the searchbar becomes visible. As soon as this happens i want the text input inside to be focused automatically.
I'm using Angular 1.5 and Angular Material and found the focus-me option as presented below. But this doesn't work somehow and I don't understand what's the problem. Maybe someone can help me.
The html presented below uses the same controller for the button and the input.
<md-toolbar class="md-table-toolbar md-default" ng-show="filter.show && !selected.length" aria-hidden="false">
<div class="md-toolbar-tools">
<md-icon md-svg-icon="magnify"></md-icon>
<form flex="" name="filter.form">
<md-input-container class="md-block" flex="" style="margin-bottom:0">
<label>Search</label>
<input type="text" focus-me="filter.show" ng-model="query.filter" ng-model-options="filter.options" aria-invalid="false">
</md-input-container>
</form>
<button class="md-icon-button md-button md-ink-ripple" type="button" ng-click="removeFilter()">
<md-icon md-svg-icon="close"></md-icon>
<div class="md-ripple-container"></div>
</button>
</div>
</md-toolbar>
Related
I have the following form that is the template tied to a angular component. I'm able to retrieve the values tied to $ctrl.form when I submit which shows that the form is being tied to the controller, as expected, however, the $valid on the submit button does not work. Once I add the validator, the button always remains disabled as the form is not valid.
<div class="verification step-3">
<form name="form" ng-submit="$ctrl.submit()">
<fieldset ng-disabled="$ctrl.isSubmitting">
<md-content class="md-no-momentum">
<!-- username -->
<md-input-container class="md-icon-float md-block">
<label>Username</label>
<input data-id="login-username"
ng-model="$ctrl.form.username"
name="username"
type="text"
required>
</md-input-container>
<!-- register button -->
<div class="text-center">
<md-button data-id="register"
class="md-primary md-raised"
ng-disabled="!$ctrl.form.$valid"
ng-class="{ 'btn-disabled': !$ctrl.form.$valid }"
type="submit"
ng-click="$ctrl.submit()">
Create account
</md-button>
</div>
</md-content>
</fieldset>
</form>
</div>
remove the $ctrl from the $valid. $valid use to check the form validation so you don't need to use the controller as reference
change this
ng-disabled="!$ctrl.form.$valid"
to this
ng-disabled="!form.$valid"
remove the ngClick also since you are using ngSubmit
<md-button data-id="register"
class="md-primary md-raised"
ng-disabled="form.$valid"
ng-class="{ 'btn-disabled': form.$valid }"
type="submit"> Create account
</md-button>
I have this piece of code that works fine. I want to keep the model open so that I can keep adding values.
As it stands now every time I click okay, the form submits and closes the model. I would love for it to submit and keep the model open.
<md-dialog aria-label="New Mark" flex="30">
<form ng-cloak>
<md-toolbar>
<div class="md-toolbar-tools">
<h2>New Mark</h2>
<span flex></span>
<md-button aria-label="close" class="md-icon-button" ng-click="hide()">
<ng-md-icon icon="cancel"></ng-md-icon>
</md-button>
</div>
</md-toolbar>
<div class="md-dialog-content">
<form name="studentForm" ng-submit="dialog.ok()">
<div layout="column" layout-sm="column" >
<div class="ms-TextField">
<div class="ms-TextField">
<label class="ms-Label">Mark</label>
<input required min="1" max="{{::passedData.totalmark}}" valid-number ng-model="student.mark" limit-to-max required class="ms-TextField-field">
<span class="ms-TextField-description">
<span ng-if="errors.title">{{::errors.title[0]}}</span>
</span>
</div>
</div>
<button aria-label="submit" ng-click="answer(student)"
class="g-button blue">0K
</button>
</form>
</div>
</form>
</md-dialog>
i'm not sure
but you have two tag form
and
and on submit (or click) two function are called, dialog.ok() and answer(student)
are you sure dialog.ok() don't hide the modal?
I am trying to build a page that uses angular material and uses elements such as md-chips and md-autocomplete.
I want to put a validation on this md-chips so that an error message will appear if there are no chips and a submit button is clicked, similar to the md-input-container.
For the md-input-container my code is as follows
<md-input-container class="md-block" flex-gt-sm>
<label>Title</label>
<input md-maxlength="100" maxlength="100" required type="text" name="bookTitle" ng-model="bookCtrl.book.name">
<div ng-messages="bookForm.bookTitle.$error" role="alert">
<div ng-message-exp="['required', 'maxlength']">
Book title is required and it should not exceed 100 characters.
</div>
</div>
</md-input-container>
And an alert will appear if the validations are not met. How can I do something similar to the md-chips with md-autocomplete that has the following code
<md-chips name="bookAuthors" ng-model="bookCtrl.book.authors" md-autocomplete-snap
md-separator-keys="bookCtrl.keys"
md-transform-chip="bookCtrl.transformChip($chip)"
md-require-match="bookCtrl.authorAutocompleteRequireMatch">
<md-autocomplete
md-selected-item="bookCtrl.selectedAuthor"
md-search-text="bookCtrl.searchAuthor"
md-items="author in bookCtrl.querySearch(bookCtrl.searchAuthor, bookCtrl.bookAuthors)"
md-item-text="author.name"
placeholder="Author">
<span md-highlight-text="bookCtrl.searchAuthor">{{author.name}}</span>
</md-autocomplete>
<md-chip-template>
<span>{{$chip.name}}</span>
</md-chip-template>
</md-chips>
What can be added to the md-chips in order to perform validation?
Create div block outside of md-chips block and add red color. It will work similarly
<div ng-messages="{test:true}" ng-show="true">
<div ng-message="test" style="color: rgb(221,44,0); font-size:12px">errroro123</div>
</div>
I have a form that is still running the submit code even if required fields have not been filled out. In Chrome it will pop up with "please fill out this field", but only on text inputs (not dropdowns) and it still runs the submit method. Am I missing something really obvious?
<form name="newForm">
<div class="section">
<div layout="row" class="inputRow">
<label for="itemA">ITEM A</label>
<input flex class="lineInput" ng-model="vm.contract.itemA" name="itemA" id="itemA" type="text" required />
<label for="itemB">ITEM B</label>
<select flex ng-model="vm.contract.contractType" name="itemB" id="itemB" required>
<option ng-repeat="type in vm.typeList">{{type}}</option>
</select>
<md-checkbox class="md-primary" aria-label="Checkbox No Ink" ng-model="vm.contract.itemC" name="itemC" id="itemC">
ITEM C
</md-checkbox>
</div>
<div layout="row" class="inputRow">
<label for="itemD">ITEM D</label>
<md-datepicker flex ng-model="vm.contract.itemD" id="itemC" name="itemC" md-placeholder="Enter date" required></md-datepicker>
<label for="itemE">ITEM E</label>
<md-datepicker flex ng-model="vm.contract.itemE" id="itemE" name="itemE" md-placeholder="Enter date"></md-datepicker>
</div>
</div>
<md-button type="submit" data-ng-click="vm.save()">Save and continue</md-button>
</form>
In your vm.save function inside the controller you have to put something like this:
if ($scope.newForm.$valid){
execute your code....
}
Hope it helps =)
If you want to disable Chrome doing it's own validation, and instead designing your own (for dropdowns for example) you need to include the novalidate attribute to your form.
Second, as Gustavo pointed out, your form has $valid/$invalid properties attached by angular, which can be used in many different ways:
Disable the save button:
<md-button ng-disabled="newForm.$invalid" type="submit" data-ng-click="vm.save()">Save and continue</md-button>
Moving the save function to the form using ng-submit
This allows you to submit by pressing enter, better than using ng-click IMO.
<form name="newForm" ng-submit="newForm.$valid && vm.save()">
Combining ng-disabled and ng-submit
<form name="newForm" ng-submit="vm.save()">
<md-button ng-disabled="newForm.$invalid" type="submit">Save and continue</md-button>
</form>
which is the best UX IMO
Using it to controller
if ($scope.newForm.$valid){
execute your code....
}
I have this simple working form, but when I put this in a $mdDialog it doesn't disable the submit button anymore... it basically ignores the networktypeForm.$invalid Is this common or is there a fix for this?
<form name="networktypeForm" ng-submit="add()" novalidate role="form">
<div class="md-dialog-content">
<md-input-container md-no-float flex>
<label>Element type</label>
<input flex ng-model="type" name="networktype" type="text" required="">
<div ng-messages="networktypeForm.networktype.$error">
<div ng-message="required">This is required</div>
</div>
</md-input-container>
</div>
<md-dialog-actions layout="row">
<md-button type="submit" class="md-primary md-raised" ng-disabled="networktypeForm.$invalid">
Add
</md-button>
</md-dialog-actions>
</form>
your requireds should be like this required not required="" or required="required"
For those still looking at this, I had a similar issue and mine was solved by removing the "novalidate" attribute.