Angulaire Matériel 0.9.7 De La Validation Du Formulaire Exemple

Je veux valider le formulaire en utilisant angularjs et angulaire-matériel intégré dans les directives, y compris les messages en vertu de terrain comme, input, select, des boutons radio.

Il y a quelques exigences spécifiques:

  • Les champs du Formulaire doivent bénéficier de l'égalité des hauteurs
  • Les boutons de la radio c'est à dire md-radio devrait être en ligne
  • L'emplacement de messages sous champs devraient être similaires
  • Angulaires-le matériau sélectionnez savoir md-select devrait être width = 100%

OriginalL'auteur Salal Aslam | 2015-06-07

  1. 9

    J'ai fait quelques ajustements pour Salal Aslam réponse:

    • bouton envoyer est de permettre
    • erorr les messages ne sont pas affichés sur intacte forme
    • valider sur "soumettre"
    • valider sur le toucher élément

    Exemple sur JSFiddle et ci-dessous.

    HTML:

    <form name="myForm" ng-app="myApp" ng-controller="myController" class="container-fluid" ng-submit="myForm.$valid && submit()" novalidate>
<div class="row">
<div class="col-xs-8">
<md-input-container md-is-error="myForm.name.$invalid && (myForm.$submitted || myForm.name.$dirty)">
<label>Name</label>
<input name="name" id="name" ng-model="obj.name" ng-required="true">
<div ng-messages="myForm.name.$error" ng-if="myForm.$submitted || myForm.name.$touched">
<div ng-message="required">Campaign Name is required.</div>
</div>
</md-input-container>
</div>
<div class="col-xs-8">
<md-input-container  md-is-error="myForm.myselect.$invalid && (myForm.$submitted || myForm.myselect.$dirty)">
<md-select name="myselect" id="myselect" placeholder="myselect" ng-model="obj.myselect" ng-required="true">
<md-option ng-repeat="o in options" ng-value="o">{{o}}</md-option>
</md-select>
<div ng-messages="myForm.myselect.$error"  ng-if="myForm.$submitted || myForm.myselect.$touched">
<div ng-message="required">myselect is required.</div>
</div>
</md-input-container>
</div>
<div class="col-xs-8">
<md-input-container md-is-error="myForm.status.$invalid && (myForm.$submitted || myForm.status.$dirty)">
<md-radio-group name="status" id="status" ng-model="obj.status" ng-required="true" class="">
<md-radio-button ng-repeat="s in statuses" ng-value="s">{{s}}</md-radio-button>
</md-radio-group>
<div ng-messages="myForm.status.$error"  ng-if="myForm.$submitted || myForm.status.$touched">
<div ng-message="required">status is required.</div>
</div>
</md-input-container>
</div>
</div>
<md-button type="button" ng-click="reset()">RESET</md-button>
<md-button type="submit" class="md-primary">SUBMIT</md-button>
</form>

    JS:

    var app = angular
.module('myApp', ['ngAnimate', 'ngAria', 'ngMaterial', 'ngMessages'])
.controller('myController', function ($scope) {
$scope.statuses = ['Planned', 'Confirmed', 'Cancelled'];
$scope.options = ['Option 1', 'Option 2', 'Option 3', 'Option 4', '...'];
$scope.submit = function() {
//submit code goes here
};
$scope.reset = function() {
$scope.obj = {
name: "",
myselect: "",
status: ""
}
};
$scope.reset();
});
    Je vous remercie pour votre réponse très utile 🙂

    OriginalL'auteur Styx

  2. 7

    J'ai créé ce violon pour les exigences mentionnées. Je vous poste ça ici pour aider quelqu'un de nouveau à angularjs ou angulaires-le matériel

    <form name="myForm" ng-app="myApp" ng-controller="myController" class="container-fluid" ng-submit="submit()">
<div class="row">
<div class="col-xs-8">
<md-input-container>
<label>Name</label>
<input name="name" id="name" ng-model="obj.name" ng-required="true">
<div ng-messages="myForm.name.$error">
<div ng-message="required">Campaign Name is required.</div>
</div>
</md-input-container>
</div>
<div class="col-xs-8">
<md-input-container>
<md-select name="myselect" id="myselect" placeholder="myselect" ng-model="obj.myselect" ng-required="true">
<md-option ng-repeat="o in options" ng-value="o">{{o}}</md-option>
</md-select>
<div ng-messages="myForm.myselect.$error">
<div ng-message="required">myselect is required.</div>
</div>
</md-input-container>
</div>
<div class="col-xs-8">
<md-input-container>
<md-radio-group name="status" id="status" ng-model="obj.status" ng-required="true" class="">
<md-radio-button ng-repeat="s in statuses" ng-value="s">{{s}}</md-radio-button>
</md-radio-group>
<div ng-messages="myForm.status.$error">
<div ng-message="required">myselect is required.</div>
</div>
</md-input-container>
</div>
</div>
<md-button type="button" ng-click="reset()">RESET</md-button>
<md-button class="md-primary" ng-disabled="myForm.$invalid">SUBMIT</md-button>
</form>

    var app = angular
.module('myApp', ['ngAnimate', 'ngAria', 'ngMaterial', 'ngMessages'])
.controller('myController', function ($scope) {
$scope.statuses = ['Planned', 'Confirmed', 'Cancelled'];
$scope.options = ['Option 1', 'Option 2', 'Option 3', 'Option 4', '...'];
$scope.submit = function() {
//submit code goes here
};
$scope.reset = function() {
$scope.obj = {
name: "",
myselect: "",
status: ""
}
}
$scope.reset();
});

    md-input-container > md-select {
margin-top: 0;
padding-bottom: 0; }
md-input-container > md-select > md-select-label {
width: 100%; }
md-input-container > md-radio-group { 
padding: 24px 2px 0; }
md-input-container > md-radio-group > md-radio-button { 
margin: 8px 5px 0;
display: inline-block; }

    violonlien

    Mise à jour de 1: Créé ce stylo angulaire 1.4.2 et angulaires-le matériau v0.10.0

    OriginalL'auteur Salal Aslam