I have a very simple AngularJs material form. Just Name, email address and text with a very simple PHP code. Unfortunately, it's not working. I have used the same PHP code in live seerver without Angularjs Material. It worked. Now it iis not working anymore
Here are the codes
<form action="form.php" method="post">
<md-input-container class="md-icon-float md-block">
<label>Name</label>
<input type="text" rows="5" name="name">
</md-input-container>
<md-input-container class="md-block">
<input type="email" placeholder="Email (required)" ng-required="true" name="from">
</md-input-container>
<md-input-container class="md-block">
<label> message</label>
<textarea rows="2" md-select-on-focus name="message"></textarea>
</md-input-container>
<md-button class="md-button" type="submit" name="submit">
<md-icon class="material-icons">send</md-icon>
</md-button>
</form>
The PHP Code
<?php
$name = $_POST['name'];
$email = $_POST['from'];
$message = $_POST['message'];
$from = 'from the web';
$to = 'the email address';
$body = "From: $name\n E-Mail: $email\n Message:\n $message";
if ($_POST['submit']){
if (mail ($to, $from, $body)) {
echo '<p>Worked</p>';
} else {
echo '<p>Error</p>';
}
}
?>
I have also tried more straightforward way but didn't work. With this I just get a white screen
I just found the Solution. The md-button is not submitting the information. If i replace the following part
<md-button class="md-button" type="submit" name="submit">
<md-icon class="material-icons">send</md-icon>
</md-button>
with this
<input class="md-button" type="submit" name="submit"/>
It works.
Related
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.
How Can I validate a form using Angular-material, I need two functionalities:
1) When click submit show error messages if required fields are empty.
2) Do not send post request(avoid submit) if form fields are not valid.
The next code avoid submit but it does not show error messages when clicking, only when cursor is going out of each input field.
<form name="userForm">
<md-input-container>
<input name="email" placeholder="Email" data-ng-model="vm.registerUserData.email" required />
<div ng-messages="userForm.email.$error" ng-if='userForm.myControl.$dirty'>
<div ng-message="required">This is required!</div>
</div>
</md-input-container>
<md-input-container>
<input name="Password" placeholder="Password" data-ng-model="vm.registerUserData.password" required />
<div ng-messages="userForm.Password.$error">
<div ng-message="required">This is required!</div>
</div>
</md-input-container>
<md-input-container>
<md-button id="registerUser" value="Register" class="md-raised md-primary" ng-click="userForm.$valid && vm.registerUser()" aria-label="login" ng-disabled="login.loginForm.$invalid()">
Create
</md-button>
</md-input-container>
</form>
You're missing 2 things.
First: add type="submit" to your md-button element.
Second: add novalidate to your form element:
Note that novalidate is used to disable browser's native form validation.
You should also consider using ng-submit on the form element instead of using ng-click on the button.
<form name="userForm" novalidate ng-submit="userForm.$valid && vm.registerUser()">
<md-input-container>
<input name="email" placeholder="Email" data-ng-model="vm.registerUserData.email" required />
<div ng-messages="userForm.email.$error" ng-if='userForm.myControl.$dirty'>
<div ng-message="required">This is required!</div>
</div>
</md-input-container>
<md-input-container>
<input name="Password" placeholder="Password" data-ng-model="vm.registerUserData.password" required />
<div ng-messages="userForm.Password.$error">
<div ng-message="required">This is required!</div>
</div>
</md-input-container>
<md-input-container>
<md-button type="submit" id="registerUser" value="Register" class="md-raised md-primary" aria-label="login" ng-disabled="login.loginForm.$invalid()">
Create
</md-button>
</md-input-container>
</form>
I'm trying to make validations to my form in an ng-repeat which now always returning as false even though all the inputs are filled and correct.
Here's my update function:
$scope.updateChannel = function (channel) {
if (channelForm.$valid) {
Channels.update({
_id: channel._id
}, {
$set: {
name: channel.name,
category: channel.category,
tags: channel.tags,
logo: channel.logo
}
}, function (error, data) {
if (error) {
console.log('unable to update the channel: ' + error);
} else {
console.log('Done! ' + data);
}
});
} else {
console.log('fix errors');
}
}
and here's my form:
<form ng-show="channel.edit == true" name="channelForm" ng-submit="updateChannel(channel)" novalidate>
<md-input-container>
<label for="name">Nombre</label>
<input type="text" name="name" ng-model="channel.name" md-maxlength="20" required>
<div ng-messages="channelForm.name.$error;">
<div ng-message="required">Esto es requerido.</div>
<div ng-message="md-maxlength">Demaciados carácteres.</div>
</div>
</md-input-container>
<md-input-container class="md-block">
<label for="category">Categorias</label>
<md-select name="category" ng-model="channel.category" multiple required>
<md-option ng-repeat="kit in kits" value="{{kit.name}}">{{kit.name}}</md-option>
</md-select>
<div class="errors" ng-messages="channelForm.category.$error">
<div ng-message="required">Esto es requerido.</div>
</div>
</md-input-container>
<md-input-container>
<label for="number">Canal</label>
<input type="number" name="number" ng-model="channel.number" ng-model-options="{ updateOn: 'blur' }" maxlength="5" required>
<div ng-messages="channelForm.number.$error;">
<div ng-message="required">Esto es requerido.</div>
<div ng-message="md-maxlength">Demaciados carácteres.</div>
</div>
</md-input-container>
<md-input-container>
<label for="tags">Tags(separar con espacio)</label>
<input type="text" name="tags" ng-model="channel.tags" md-maxlength="20" required>
<div ng-messages="channelForm.tags.$error;">
<div ng-message="required">Esto es requerido.</div>
<div ng-message="md-maxlength">Demaciados carácteres.</div>
</div>
</md-input-container>
<md-input-container>
<label for="logo">Logo</label>
<input type="text" name="logo" ng-model="channel.logo" required>
<div ng-messages="channelForm.logo.$error;">
<div ng-message="required">Esto es requerido.</div>
</div>
</md-input-container>
<md-button type="submit" class="md-raised md-primary" ng-click="channel.edit = false" ng-disabled="channelForm.$invalid">Guardar</md-button>
<md-button class="md-raised" ng-click="channel.edit = false">Cancelar</md-button>
<md-button class="md-raised md-warn" ng-click="removeChannel(channel)">Borrar</md-button>
</form>
now this is in an ng-repeat="channel in channels" so I'm not sure if that's the problem.
Also, all the ng-messages seem to be working correctly and even when none of them are showing I'm still unable to update the document.
What am I doing wrong here?
Thanks!
If this is in a ng-repeat, you will end up with a bunch of forms named channelForm
You could put a new controller on the form tag and move updateChannel in that controller.
I'm having problem with designing simple form.
<div layout="column" ng-cloak>
<md-content class="md-padding">
<form name="search">
<md-input-container>
<label>From where?</label>
<input name="from" ng-model="from" required>
</md-input-container>
<md-input-container>
<label>To where?</label>
<input name="to" ng-model="to" required>
</md-input-container>
<md-datepicker ng-model="date" md-placeholder="When?" ng-required="true" required></md-datepicker>
<md-input-container>
<md-button class="md-raised md-primary">Search</md-button>
</md-input-container>
</form>
</md-content>
</div>
This is how it looks, I don't know am I doing something wrong? I'm new to this framework. I want all inputs to be aligned to same base line, and I wan't to add icons in front of text inputs.
There are known issues with input alignment at the moment. You would have to tweak some margins if you want to align it yourself.
https://github.com/angular/material/issues/6636
https://github.com/angular/material/issues/6219
You can get icons in the input containers by specifying a <md-icon>.
<md-input-container class="md-icon-float md-block">
<label>Name</label>
<md-icon md-svg-src="img/icons/ic_person_24px.svg" class="name"></md-icon>
<input ng-model="user.name" type="text">
</md-input-container>
Check the documentation for more input examples.
Your structure has only one md-content under the layout="column". To stack the md-input-container and md-datepicker items you would need to add layout="column" to the form tag <form name="search" layout="column">which is the tag that is the parent to the tags your want to stack in a column.
<div layout="column" ng-cloak>
<md-content class="md-padding">
<form name="search" layout="column">
<md-input-container>
<label>From where?</label>
<input name="from" ng-model="from" required>
</md-input-container>
<md-input-container>
<label>To where?</label>
<input name="to" ng-model="to" required>
</md-input-container>
<md-datepicker ng-model="date" md-placeholder="When?" ng-required="true" required></md-datepicker>
<md-input-container>
<md-button class="md-raised md-primary">Search</md-button>
</md-input-container>
</form>
</md-content>
</div>
My html is
My html is
<form name="signInForm" novalidate="">
<div class="form-group has-feedback has-feedback-left">
<label class="control-label sr-only">Email address</label>
<input type="email" class="form-control" name="username" placeholder="Email address" required="" data-ng-model="user.username" data-ng-trim="false"/>
</div>
<div class="form-group clearfix">
<div class="pull-right">
<button type="submit" class="btn btn-primary submit-button" data-ng-click="signIn()">
<span class="submit-button-text">Sign in</span>
</button>
</div>
</div>
</form>
Controller :
$scope.signIn = function(isValid) {
$log.log("username is" + $scope.user.username + $scope.user.password);
}
when I clicked sign in button , mu user name white spaces are trim off. But I want that white spaces in my user name should retain so that I can track it and displayed error message.
So I used 'data-ng-trim = false' .
But it seems its not working.
Please help.
Unfortunately there ng-trim doesn't apply to input type="email". What you can do is change the input to type="text" in order to use the ng-trim, but this solution is not ideal.
See the Angular documentation for input type=email
You have to use ng-trim="false":
<input type="email" class="form-control" name="username"
placeholder="Email address" required=""
data-ng-model="user.username"
ng-trim="false"/>
If it is not working for you, please update you angularjs version here.