We Keep Coding

Angular - show error message on submit when form is invalid

I have this form where an error message shows under every field if I leave it empty or invalid.
<form #projectForm="ngForm" (ngSubmit)="onSubmit()">
<div class="form-group col-md-6" [class.has-error]="codeControl.invalid && codeControl.touched">
<label class="control-label">code</label>
<input type="text" class="form-control" required [(ngModel)]="projet.code" id="code" name="code" #codeControl="ngModel">
<span class="help-block" *ngIf="codeControl.invalid && codeControl.touched">code is required </span>
</div>
<div class="form-group col-md-6" [class.has-error]="libelleControl.invalid && libelleControl.touched">
<label class="control-label">libelle</label>
<input type="text" class="form-control" required [(ngModel)]="projet.libelle" id="libelle" name="libelle" #libelleControl="ngModel">
<span class="help-block" *ngIf="libelleControl.invalid && libelleControl.touched"> libelle is required </span>
</div>
<button type="submit" class="btn btn-primary" >submit </button>
</form>
But when it comes to the submit button , I don't want the submit button to be disabled until the form is valid, instead I want the submit button border to become red and a red error message shows under the submit button when clicked and the form is invalid. How can I achieve that ?

try this:
on your component
success: any;
constructor ()
{
this.success = true;
}
onSubmit(){
if(this.yourform.invalid){
this.success= false;
return;
}
}
on your html
<div *ngIf="success;then content else other_content"></div>
<ng-template #content>
<button type="submit" class="btn btn-primary" >submit </button>
</ng-template>
<ng-template #other_content>
<button type="submit" class="btn btn-primary" style="border: 2px solid red">submit
</button>
<!-- your error message goes here -->
</ng-template>
i copied the *ngIf here at How to use *ngIf else?

I would go with simple getter to manage state of the 'submit btn'
get isFormValid():boolean {
this.ngForm && this.ngForm.valid;
}
then
<button type="submit" class="btn btn-primary" [class.cssClassToManageBtnState]="isFormValid" >submit </button>

We have to override the default behaviour of submit button. So, remove the button type as submit and add click event to it
<button type="button" (click)="onSubmit()" class="btn btn-primary" >submit </button>
Remove the submit event in form tag
<form #projectForm="ngForm">
Add the conditional class to the button
<button type="submit" (click)="onSubmit()" class="btn btn-primary" [ngClass]="projectForm.valid ? '' : 'invalid-form-btn'" >submit </button>
<span *ngIf="!projectForm.valid">The form is not valid </span>
.invalid-form-btn {
border: 1px solid red;
}

Get value from another HTML element

I need to send the value of input element when user clicks on the button. What is the best way to accomplish this in Angular2?
<input type="text" class="form-control" placeholder="Search for images..." />
<span class="input-group-btn">
<button (click)="onClick($event)" class="btn btn-default" type="button">Go!</button>
</span>

You can define refference to input using #name then you can use it name.value
<input type="text" class="form-control" placeholder="Search for images..." #inputElement />
<span class="input-group-btn">
<button (click)="onClick($event, inputElement.value)" class="btn btn-default" type="button">Go!</button>
</span>
Its not the best its the easiest i would say

you can bind the click function as:
<input type="text" [(ngModel)]="value" placeholder="Enter the name" />
<span class="input-group-btn">
<button (click)="onClick(value)">Go!</button>
</span>
on .ts file you have to create onClick function
onClick(valueRecieved){
// do what you want
}

Make a html attributie with button role submit a form

I need to have my html attribute submit a form. My problem is that a normal button attribute is able to use the type="submit" and other attributes using role="button" don't do anything with the type.
So how do I make it submit a form? If you can give me a script to do it, that would be fine too.
(I don't know javascript myself)
My current code:
<form action="myloc" method="post">
<div class="input-group col-lg-6">
<a type="submit" class="btn btn-default input-group-addon" role="button">
Search<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</a>
<input type="search" class="form-control" name="search" id="search" placeholder="Search">
</div>
</form>

If I understand you correctly you want to submit the form when you press the button using javascript?
<form id="test" action="myloc" method="post">
<div class="input-group col-lg-6">
<a type="submit" class="btn btn-default input-group-addon" role="button" onclick="document.getElementById('test').submit();">
Search<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</a>
<input type="search" class="form-control" name="search" id="search" placeholder="Search">
</div>
</form>
Notice that what I did was to set an id ("test") on the form and then added an onclick event to the anchor element.

Here is your solution,
<form action="myloc" method="post" id="myForm">
<div class="input-group col-lg-6">
<a type="submit" class="btn btn-default input-group-addon" role="button" id="sub">
Search<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</a>
<input type="search" class="form-control" name="search" id="search" placeholder="Search">
</div>
</form>
Javascript code
var button=document.getElementById('sub');
button.onclick=function(){
document.getElementById("myForm").submit();
}

Give your <a> element an id, then set a jquery onclick function with that id to run whatever query you want.

angular bootstrap modal opening on the enter click

In my controller i have methods
$scope.openJukeboxesModalToGroup -- open modal popup
$scope.searchJukeboxes --- to search on the page
$scope.keyPressed -- capture the key pressing
In the partial with a form
<form class="form-inline" role="form" ng-submit="deadForm()">
<div class="form-group">
<button ng-click="openJukeboxesModalToGroup()" class="btn btn-info">Add Stores to Group</button>
</div>
<div class="form-group">
<input type="text" ng-model="jukeboxFilter" ng-keypress="keyPressed($event, 'search')" class="form-control" placeholder="search">
</div>
<button type="button" ng-click="searchJukeboxes()" class="btn btn-info"><span class="glyphicon glyphicon-search"></span></button>
<button type="button" ng-click="resetFilter()" class="btn btn-info"><span class="glyphicon glyphicon-repeat"></span></button>
</form>
keyPressed method is
$scope.keyPressed = function($event, eventType) {
$event.stopImmediatePropagation();
if(eventType=='search') {
if($event.which==13) {
$scope.searchJukeboxes();
}
}
};
I am trying to start the search whenever ever somebody types something in the text bar and clicks enter. But i don't somehow the openJukeboxesModalToGroup() method is called too. I have tried to stop this by calling stop event proprpagation, changing name of openJukeboxesModalToGroup() method. But nothing is working. Any help on this.
deadForm() method is impleament and i am not getting any error in chrome console.

Change your button for openJukeBoxesModalToGroup() to this:
<button type="button" ng-click="openJukeboxesModalToGroup()" class="btn btn-info">Add Stores to Group</button>
The issue is you are not providing a type so it is classing the button as a submit in which case openJukeboxesModalToGroup() is being fired from your enter submit event.
When you are hitting enter inside a form it will trigger a submission, I recommend adding your method to the form itself via the ng-submit directive and making your button the submission...
<form class="form-inline" role="form" ng-submit="searchJukeboxes()">
<div class="form-group">
<button type="button" ng-click="openJukeboxesModalToGroup()" class="btn btn-info">Add Stores to Group</button>
</div>
<div class="form-group">
<input type="text" ng-model="jukeboxFilter" ng-keypress="keyPressed($event, 'search')" class="form-control" placeholder="search">
</div>
<button type="submit" ng-click="searchJukeboxes()" class="btn btn-info"><span class="glyphicon glyphicon-search"></span></button>
<button type="button" ng-click="resetFilter()" class="btn btn-info"><span class="glyphicon glyphicon-repeat"></span></button>
</form>

Form with editable elements should have `editable-form` attribute

I have a form within which i have used x-editable plugin for editing a text-field. But i am getting the following script error. Can anyone please tell me some solution for this
Form with editable elements should have `editable-form` attribute. <span editable-text="user.name" e-form="textBtnForm" class="ng-scope ng-binding editable">
Working Demo
html
<div ng-app='myApp' ng-controller="ArrayController">
<form action="#" >
<span editable-text="user.name" e-form="textBtnForm">
{{ user.name || 'empty' }}
</span>
<button class="btn btn-default" ng-click="textBtnForm.$show()" ng-hide="textBtnForm.$visible">edit
</button>
</form>
</div>
script
var app = angular.module('myApp', ["xeditable"]);
app.controller('ArrayController', function ($scope) {
$scope.test = "manu";
$scope.user = {
name: 'awesome user'
};
});

There are a couple things to do:
add the editable-form attribute to the form as the error suggest.
remove the e-form="textBtnForm", it's not required for your requirement.
instead, set the textBtnForm as a name of the form.
add type="button" to the edit button, otherwise it doesn't work (don't know why ..).
I've also add save and cancel button when editing for the sake of completeness.
The result would look like this:
<form editable-form name="textBtnForm" action="#">
<span editable-text="user.name">
{{ user.name || 'empty' }}
</span>
<button type="button" class="btn btn-default" ng-click="textBtnForm.$show()" ng-hide="textBtnForm.$visible">
edit
</button>
<span ng-show="textBtnForm.$visible">
<button type="submit" class="btn btn-primary" ng-disabled="textBtnForm.$waiting">
Save
</button>
<button type="button" class="btn btn-default" ng-disabled="textBtnForm.$waiting" ng-click="textBtnForm.$cancel()">
Cancel
</button>
</span>
</form>
JSFiddle: http://jsfiddle.net/5TZX5/1/
Hope this helps.

If there is just a single element you want to edit, you can remove the form, which will make it work.
Or you must add ng-click="$form.$show()" to the span element as described here.

the previous approach is partial correct and can be applied only if use a single input in that form. Also if you try to add more elements, then will not work correct.
So the right solution that i have is to use ng-form with editable-form directive as block for each form element (input) that you want apply the xedit plugin, and of course remove editable-form from main form.
the sample based by your code is below:
<div ng-app='myApp' ng-controller="ArrayController">
<form action="#" >
<div ng-form editable-form name="textBtnForm">
<span editable-text="user.name" ng-click="textBtnForm.$show()">{{user.name||'empty'}}</span>
<span ng-show="textBtnForm.$visible">
<button type="button" class="btn btn-primary" ng-disabled="textBtnForm.$waiting" ng-click="textBtnForm.$submit()"> Save</button>
<button type="button" class="btn btn-default" ng-disabled="textBtnForm.$waiting" ng-click="textBtnForm.$cancel()">cancel</button>
</span>
</div>
<hr>second form element<hr>
<div ng-form editable-form name="textBtnForm2">
<span editable-text="user.phone" ng-click="textBtnForm2.$show()">{{ user.phone || 'empty' }}</span>
<span ng-show="textBtnForm2.$visible">
<button type="button" ng-disabled="textBtnForm2.$waiting" ng-click="textBtnForm2.$submit()">Save</button>
<button type="button" class="btn btn-default" ng-disabled="textBtnForm2.$waiting" ng-click="textBtnForm2.$cancel()"> Cancel</button>
</span>
</div>
</form>
</div>