Angular - show error message on submit when form is invalid - javascript

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;
}

Related

How to close the popup modal when we click on save or cancel button

I have an angular application, In that I have created the popover using angular.
.component.html
<div class="col-md-4 ">
<div class="cc button-popover" >
<popover-content #addObjectivePopovers
[animation]="true"
[closeOnClickOutside]="false"
[closeOnMouseOutside]="false" class="vb" *ngIf="!showPopover" >
<form >
<div class="form-group popover-form" >
<label>Enter Custom Trigger Habit: When I</label>
<textarea class="form-control" [(ngModel)]="name" name="name"></textarea>
</div><br>
<div class="form-group popover-form">
<label>Enter Custom Trigger Habit: I will</label>
<textarea class="form-control" #customHabit id="power" maxlength="1500" [(ngModel)]="name2" name="name2"></textarea>
<p class="textarea-count">({{1500 - customHabit.value.length }} of 1500 Characters remaining)</p>
</div>
<div class="popover-btn">
<button class="btn btn-default " (click)="showPopover = false">CANCEL</button>
<button type="button" (click)="save()" >SAVE</button>
</div>
</form>
</popover-content>
</div>
<button [popoverOnHover]="false" type="button" popoverPlacement="bottom" [popover]="addObjectivePopovers" >ADD CUSTOM HABIT</button>
</div>
So when I add some content in textarea and click on the save button I has to close the popup ,and also when we click on the cancel also It should close the popup.
Can anyone help on the same.
Assuming the show boolean flag is separate from the visible state of the popover then add a new boolean flag to your component ts which will be used to manage the visible state of the popover and toggle it with your cancel/save controls:
component ts:
showPopover = false
save() {
this.show = true;
this.showPopover = false;
}
component html:
<div class="form-group popover-form" *ngIf="showPopover">
<textarea class="form-control" id="power" maxlength="1500" [(ngModel)]="name" name="name"></textarea>
</div>
<div>
<button class="btn btn-default cancel-btn" (click)="showPopover = false">CANCEL</button>
<button type="button" (click)="save()">SAVE</button>
</div>
<p *ngIf="show">{{name}}</p>

How to turn-on a radio button programmatically

I have the below posted radio button and input. I want to toggle the radio button programmatically so that, when I set this.iAreaOfCoverageForThresholdPasser.average-height to true, the radio button should be turned on "highlighted".
HTML:
<div id="idRadioButtonForAverageHeightDivision">
<input [value]="1" [(ngModel)]="iOperationPasser.averageHeight" name="radioGroupForOperations" type="radio" clrCheckbox (change)="onAverageHeightOptionSelected($event)" [(checked)]="averageHeight"/>
<label id="operation-average-height">
{{ "SITE.AREAS_OF_COVERAGE_FOR_THRESHOLD.OPERATION_AVERAGE_HEIGHT" | translate }}
<button class="btn btn-sm btn-icon" (click)="showInformation('SERVICE_DIST_4_AGRI')">
<clr-icon shape="help-info" class="is-solid"></clr-icon>
</button>
</label>
</div>
.html:
<div id="idRadioButtonForAverageHeightDivision">
<input [value]="1"
name="radioGroupForOperations"
type="radio"
clrCheckbox
(change)="onAverageHeightOptionSelected($event)"
[(checked)]="iOperationPasser.averageHeight"
/>
<label id="operation-average-height">
<button class="btn btn-sm btn-icon" (click)="onClick()">
press
</button>
</label>
</div>
.ts
iOperationPasser = {
averageHeight: true
}
onClick = () => {
this.iOperationPasser.averageHeight=!this.iOperationPasser.averageHeight;
}

Angularjs ng-disabled not working properly

I'm trying to enable a button only when my input is filled with at least 18 characters. Here is the HTML code:
<form id="frm.frmEntidade" name="frm.frmEntidade">
<div>
<input type="text" ng-model="entidade.cnpj" id="cnpjEntidade" name="cnpjEntidade" required />
<span class="input-group-btn">
<button title="Buscar Entidade" class="btn btn-primary"
type="button" ng-click="buscarEntidade(entidade.cnpj)" ng-
disabled="frm.frmEntidade.cnpjEntidade.lenght !== 18">
<span class="glyphicon glyphicon-search"></span>
</button>
</div>
</form>
but the button stay awas disabled, anyone could help?
You have a typo error on the word length. Change:
<button [...]
ng-disabled="frm.frmEntidade.cnpjEntidade.lenght !== 18">
To:
<button [...]
ng-disabled="frm.frmEntidade.cnpjEntidade.length !== 18">
As a side note, this condition check if it is different from 18, not if "input is filled with at least 18 characters".
try ng-disabled="entidade.cnpj.length!=18"
It's better use ng-minlength for form validation. by checking $valid you can enable or disable button
<form id="frm.frmEntidade" name="frm.frmEntidade">
<input type="text" ng-model="entidade.cnpj" id="cnpjEntidade" name="cnpjEntidade" required ng-minlength="18" />
<span class="input-group-btn">
<button title="Buscar Entidade" class="btn btn-primary"
type="button" ng-click="buscarEntidade(entidade.cnpj)"
ng-disabled="!frm.frmEntidade.$valid">
<span class="glyphicon glyphicon-search"></span>
Button
</button>
</span>
</form>

AngularJs - Submit button multiple repetition

i'm working on ACTIVI in AngularJS.
I need to submit forms, so i created it with a submit button. The problem is that each submit button is a bit different (one is for text type form, another for enum type forms) and with new form the previously button is repeated twice.
As you can see this one is ok:
.
But the next form repeat the previously submit button:
This is the code in html
<div ng-controller="githubController3">
<div ng-controller="githubControllerForm1">
<div ng-controller="completeTaskAction">
<form ng-submit="submitForm()">
<div ng-repeat="x in names">
{{ x.name }}*
<div ng-if="x.id=='name'">
<input type="text" name="nome" ng-model="formData.properties[0].value" placeholder="{{x.name}}"> {{ value }} </input>
</div>
<div ng-if="x.id=='email'">
<input type="email" name="email" ng-model="formData.properties[1].value" placeholder="{{x.name}}"> {{ email }} </input>
</div>
<div ng-if="x.id=='income'">
<input type="number" name="numero" ng-model="formData.properties[2].value" placeholder="{{x.name}}"> {{ income }} </input>
</div>
</div>
</div>
</form>
<div ng-controller="completeTaskAction">
<form ng-submit="submitForm()">
<br>
<button ng-show="x.type==enum" type="submit" class="btn btn-success btn-lg btn-block">
<span class="glyphicon glyphicon-flash"></span>Submit!
</button>
</div>
</form>
</div>
</div>
<div ng-controller="githubControllerForm1">
<div ng-controller="completeTaskAction2">
<div ng-repeat="x in names">
<div ng-if="x.type=='enum'">
<!--/////////////////////////////////-->
<form ng-submit="submitForm2()">
<select ng-model="formData2.properties[0].value" ng-options="y.id as y.name for y in x.enumValues "></select>
<br>
<button ng-hide="x.type==enum" type="submit" class="btn btn-success btn-lg btn-block">
<span class="glyphicon glyphicon-flash"></span> Submit!
</button>
</div>
</div>
</form>
</div>
</div>
I tried (as you can see) with ng-show / hide / ng-if but doesnt work...
The first form is working fine because the button is outside ng-repeat. In the second case the submit button is inside ng-repeat.

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>

Categories