I am trying to create a view to send an email by attaching a file. I just started coding but not sure how to attach .could anybody help me for this.
here is my small code.
<div>
<div> To</div>
<div><input type="text" name="" placeholder="" size="70" /></div>
</div>
<div>
<div>Subject</div>
<div><input type="text" name="" placeholder="" size="70"/></div>
</div>
after this I have to add image and by click that image I have to attach a file and enter message, then click send button.
You could take a look at the ngDroplet module.
Related
I am writing a recipe web app, I have recipes that all hold an array of ingredients, and this is how I wrote my application
<h2>Add {{addRecipeForm.controls.name.value}}</h2>
<form [formGroup]="addRecipeForm">
<label>Name:</label>
<input type="text" formControlName="name" >
<p *ngIf="addRecipeForm.controls.name.errors">This field is required!</p><p></p>
<label>Serves:</label>
<input type="text" formControlName="serves" >
<p></p>
<label>Steps:</label>
<textarea name="Text1" cols="60" rows="5" type="text" formControlName="steps" ></textarea>
<p></p>
<label>Remarks:</label>
<textarea name="Text1" cols="60" rows="3" type="text" formControlName="remarks" ></textarea>
<p></p>
<hr>
<app-add-ingredient></app-add-ingredient>
<hr>
<button type="submit">Add new recipe</button> <button (click)="goBack()">Back</button>
</form>
I call to show the ingredient adder/lister, how do I send the array the add-ingredient component builds back up to its parent the add-recipe component, I looked into eventemitter but as stated here: What is the proper use of an EventEmitter? it doesnt seem to be a good idea? or atleast not ideal.
If eventemitter is not the best way to pass an array to its parent, what is? a service or some other way?
I have also read the official doc on this sort of thing found here https://angular.io/guide/component-interaction#!#parent-to-child-local-var
but im not sure how to feed an array back to a parent after its been created (inputted via a form by the user) back
the best solution would be to use a service only accessible with the two component.
You will find some examples on the angular doc https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service
I'm new with angular forms, i'm trying to validate an email field, and sho a message if the input is invalid.
Ithinked to have do everything correctly, but the error message doesen't show.
<form name="Login" novalidate>
<div class="ama-col-sm-12 pad-top-20-xs form-group">
<label class="copy-title mts-bold pad-bottom-10-xs d-block">E-MAIL</label>
<input type="email" ng-model="Login.userMail" required ng-class="{'invalidClass': Login.userMail.$invalid}">
<div ng-show="Login.userMail.$invalid">
Non va mica bene
</div>
</div>
</form>
Can you tell me if in the markup there is something wrong please?
put name attribute on your email input field and then use the field name while show/hide validation message.
Also make sure your form name and ng-model object shouldn't be the same otherwise it will get wiped off. In this case Login and ng-model's Login were conflicting.
<form name="Login" novalidate>
<div class="ama-col-sm-12 pad-top-20-xs form-group">
<label class="copy-title mts-bold pad-bottom-10-xs d-block">E-MAIL</label>
<input type="email" name="email" ng-model="user.userMail" required
ng-class="{'invalidClass': Login.email.$invalid}">
<div ng-show="Login.email.$invalid">
Non va mica bene
</div>
</div>
</form>
I'm using angular-messages to display form validation errors on my angular app.
As per the documentation, I have built the following code
<form name="loginForm">
<label class="item item-input">
<input type="email" placeholder="Email" ng-model="data.email" name="email" required>
</label>
<div ng-messages="loginForm.email.$error" style="color:maroon">
<div ng-message="required">Please input a valid e-mail address</div>
<div ng-message="email">You did not enter your email address correctly...</div>
</div>
</form>
I have included the ngMessages directive in my javascript as well as imported the angular-messages.js file.
Unfortunately, these two messages are showing perpetually. Regardless of what I type in the input field, be it a valid email or not. Both messages are always showing. If I try to only include one ng-message, the result is the same.
What could I be doing wrong?
edit: In case my description isn't very clear, this is a print of the result
https://s9.postimg.cc/du9230tdb/Screen_Shot_2015_06_26_at_17_09_24.png
You gotta make sure you are actually including ngMessage to your module.
var app = angular.module('app', [
'ngMessages'
])
... and that you included the library to your project
<script src="/scripts/vendors/angular-messages/angular-messages.js"></script>
Everything seems to be fine in the code you're sharing.
<form name="loginForm">
<label class="item item-input">
<input type="email" placeholder="Email" ng-model="data.email" name="email" required>
</label>
<div ng-messages="loginForm.email.$error" style="color:maroon">
<div ng-message="required">Please input a valid e-mail address</div>
<div ng-message="email">You did not enter your email address correctly...</div>
</div>
</form>
Here is a working copy on Plunker I'm using your piece of code.
From Angularjs documentation.
By default, ngMessages will only display one error at a time. However, if you wish to display all messages then the ng-messages-multiple attribute flag can be used on the element containing the ngMessages directive to make this happen.
If you want to show the errors after the field is dirty, please visit this link.
Make sure you are including ngMessage module and the library as well. Please see Carlos's answer.
Thanks
Check with
<div ng-messages="loginForm.email.$error" ng-show="loginForm.email.$invalid && loginForm.email.$touched">
...
</div>
This trick saved my day.
I have inputs in a web page without the form tag (useless to me).
How can I get their validity status inside the HTML ? This
<input name="myInput" type="text" ng-pattern="/^[0-9]{13}$/">
<input type="button" ng-show="myInput.$valid">
doesn't work.
I'm afraid that won't work without wrapping it in a form as you need to access those fields via the form's controller.
<form name="myForm">
<input name="myInput" type="text" ng-pattern="/^[0-9]{13}$/">
<input type="button" ng-show="myForm.myInput.$valid">
</form>
Should work.
If you're unable to use the form tag for any reason, you'll have to wire that up manually.
In the following example, message is undefined when I display it in the controller after the event is fired. Why?
<form>
<input type="text" ng-model="message.Title" />
<textarea ng-model="message.Content"></textarea>
<input type="submit" value="Send Message" ng-click="sendMessage(message)" />
</form>
Controller:
$scope.sendMessage = function(message) {
console.log(message);
}
My code seems identical to the documentation here except my controller manages the entire "page" not just the form.
Wow nevermind, apparently when you submit with blank values it doesn't even create the object.
I see you've found your problem, but I'd like to propose a solution to prevent your problem anyway:
<form name="messageForm" ng-submit="sendMessage(message)">
<input type="text" ng-model="message.Title" required/>
<span ng-show="messageForm.title.$error.required && messageForm.title.$dirty">required</span><br/>
<textarea ng-model="message.Content"></textarea>
<input type="submit" value="Send Message" ng-disabled="messageForm.$invalid" />
</form>
The above will make the Title required, display an error message, and disable your submit button if the form isn't valid.