i have form for selected date. how to disable the submit button if nothing changed in date form?
my html code
<div class="col-xs-6">
<label><i class="far fa-calendar-alt"></i> Start <span class="text-danger">*</span></label>
<input id="startTrip1" name="NgbDate" data-provide="datepicker" ngbDatepicker #d="ngbDatepicker" [markDisabled]="markDisabled" [minDate]="minDates" type="text" class="form-control form-flat" [(ngModel)]="ad.start_date" (dateSelect)="onDateSelect($event, ad)" (blur)="validateInput()" (click)="d.toggle()" [ngModelOptions]="{standalone: true}" [disabled]="form.controls.tripduration.hasError('required')" >
<div class="text-danger" *ngIf="(ad.start_date == '' || ad.start_date == undefined) && ngForm.submitted">
* This field is required
</div>
<div class="text-danger" *ngIf="form.controls.tripduration.hasError('required')">
* Fill the durations first
</div>
</div>
//submit button
<button class="col-xs-12 text-center text-strong pointer custom-trip-btn" (click)="publishTrip()">
<button class="custom-trip-btn">SUBMIT</button>
If you used below code, the button only enabled if user changed value in the form
[disabled]="!(accountForm.valid && accountForm.dirty)"
<form [formGroup]="profileForm">
<label>
First Name:
<input type="text" formControlName="firstName">
</label>
<label>
Last Name:
<input type="text" formControlName="lastName">
</label>
</form>
<button type="submit" [disabled]="!profileForm.dirty">Submit</button>
Read more about it here
Hope this works!
<label>
First Name:
<input type="text" formControlName="firstName">
</label>
<label>
Last Name:
<input type="text" formControlName="lastName">
</label>
</form>
<button [disabled]="!(profileForm.valid ||!profileForm['isDirty']())"
class="btn btn-primary">Submit</button>
Check some what same question here
Stackblitz-example of some old problem of mine
for the above you need to use RxReactiveFormsModule RxReactive npm
Related
I have a form within a prime ng dialogue control. I don't want to use ngSubmit method in form tag as I have two submit methods depends on some value for this form. I want to manually set this form's submit property on typescript class file. How can I get that form object in ts file to set its "submitted" or "valid" properties manually and take decision based on those? In a word how can I get control of this form in my class file to set or get its internal properties.
Html:
<p-dialog header="Create New Message" [(visible)]="IsShowNewMessageDialog"
modal="modal" width="800" height="auto" styleClass="modal-blue" appendTo="body">
<form #f="ngForm" name="newMessageForm" (ngSubmit)="f.form.valid" novalidate autocomplete="off">
<div *ngIf="model && IsShowNewMessageDialog">
<div class="ui-g">
<div class="ui-g-11">
<span style="color:red">{{ErrorMessage}}</span>
</div>
</div>
<div class="ui-g">
<div class="ui-g-2"><label class="">To</label></div>
<div class="ui-g-10" [ngClass]="{ 'has-error': f.submitted && !emailTo.valid }">
<input type="text" [(ngModel)]="model.emailTo" #emailTo="ngModel"
class="text-field"
pInputText name="emailTo"
placeholder="Email To *" minlength="3"
required>
</div>
</div>
<div class="ui-g">
<div class="ui-g-2"><label class="">CC</label></div>
<div class="ui-g-10">
<input type="text" [(ngModel)]="model.cC" #CC="ngModel"
class="text-field"
pInputText name="CC"
placeholder="CC" minlength="3">
</div>
</div>
<div class="ui-g">
<div class="ui-g-2"><label class="">Bcc</label></div>
<div class="ui-g-10">
<input type="text" [(ngModel)]="model.bcc" #BCC="ngModel"
class="text-field"
pInputText name="BCC"
placeholder="BCC" minlength="3">
</div>
</div>
<div class="ui-g">
<div class="ui-g-2"><label class="">Subject</label></div>
<div class="ui-g-10" [ngClass]="{ 'has-error': f.submitted && !subject.valid }">
<input type="text" [(ngModel)]="model.subject" #subject="ngModel"
class="text-field"
pInputText name="subject"
placeholder="Subject *" minlength="3"
required>
</div>
</div>
<div class="ui-g">
<div class="ui-g-12">
<p-editor name="emailBodyPlain" #emailBodyPlain="ngModel" [(ngModel)]="model.emailBodyPlain"
placeholder="Email Body *" [style]="{'height':'320px'}"
minlength="3"></p-editor>
</div>
</div>
</div>
<div class="text-right pr-5">
<button class="btn btn-warning" type="button"
[disabled]="!f.form.valid"
(click)="sendNewMail(false)" label="Send">
<i class="fa fa-paper-plane"></i> Send
</button>
<button class="btn btn-warning" type="button"
[disabled]="!f.form.valid"
(click)="saveNewMail(true)" label="Save">
<i class="fa fa-floppy-o"></i> Save
</button>
</div>
</form>
</p-dialog>
Submit Method:
saveNewMail(isDraft) {
this.messageCenterService.saveNewMail(this.newMail)
.subscribe(
data => {
this.IsShowNewMessageDialog = false;
},
error => {
this.ErrorMessage = error.Message;
});
}
Instead of ng-submit you can use the (click) event on the submit button and can pass the form values to the component check the following syntax:
<button (click)="onSubmit(newMessageForm.value)"></button>
you can define onSubmit method in component with a parameter which will contain the form value.
You can also use the following to disable a button based on form validity:
<button [disabled]="newMessageForm.invalid"></button>
I have a list of some input fields and few select options, so I want them be required on ng-click and raise a message just over the particular required item in form of PopupMenu or kind of that, or what ever the suitable way to show require warning just over the field
Hierarchy in my case:
<form>
<input required
<input required
location form for multiple records (not form tag)
contact form for multiple contacts (not form tag)
submit button to post (input required), all locations and all contacts.
</form>
My Form:
<div class="form-inline">
<div class="form-group">
<input type="text" placeholder="Legal Name" ng-model="companyForm.legalName" required/>
</div>
<div class="form-group">
<input type="text" placeholder="EIN" ng-model="companyForm.ein"/>
</div>
<div class="form-group" id="selectFormationDiv">
<select id="formationListId"></select>
</div>
<div class="form-group">
<input type="checkbox" style="margin-top: 5px;" ng-model="companyForm.internal"/> <b>Internal</b>
</div>
</div>
Note this is not form, and not be called on ng-submit.
My Output:
My Desired output:
Please guide me through how do I code to get my desired output. Thanks
angular.module('app', [])
.error {
color: red;
}
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
<div ng-app='app'>
<form name="form" class="css-form" novalidate>
<input type='text' ng-model='temp1' required name='temp1' />
<span ng-show="form.temp1.$error.required && form.$submitted" class='error'>
field1 is required
</span>
<br>
<input type='text' ng-model='temp2' required name='temp2' />
<span ng-show="form.temp2.$error.required && form.$submitted" class='error'>
field2 is required
</span>
<br>
<input type="submit" value="Save" />
</form>
<hr>
<!--Solution without `<form>` tag: -->
<input type='text' ng-model='temp3' name='temp3' />
<span ng-show="!temp3 && $submitted" class='error'>field3 is required</span>
<br>
<input type='text' ng-model='temp4' name='temp4' />
<span ng-show="!temp4 && $submitted" class='error'>field4 is required</span>
<br>
<input type="button" ng-click='$submitted=true' value="Save" />
</div>
i have a problem with angulare code. I have made a small form structure with ng reapet . When i removed one of element every element down of them are not show the "not valid" message . All up of them work fine but down of remove not showing info not given the false of this data-ng-show="Zhf.w{{key}}.$error.pattern" why ng show not taked false.
<form name="zhf" class="form-horizontal">
<div data-ng-repeat="(key, i) in vm.items.Info | limitTo: (vm.NumberOfDays)">
<div class="col-sm-3">
<input type="text" class="form-control" id="w{{key}}" name="w{{key}}" ng-model="vm.item[key].w" placeholder="0" ng-pattern="/^[0-9]{1,10}([,.][0-9]{1,2})?$/" required>
<p style="color: #a94442" class="text-danger" data-ng-show="Zhf.w{{key}}.$error.pattern">
<span>Not a valid number!</span>
</p>
</div>
<div class="col-sm-2">
<button type="button" class="btn btn-danger btn-sm " ng-click="vm.delete(key)">remove</button>
</div>
</div>
</form>
vm.delete = function(index) {
vm.items.Info.splice(index, 1);
vm.item.splice(index, 1);
vm.NumberOfDays -= 1;
}
I have updated your ng-repeat section to validate form and sample is HERE
<form novalidate="novalidate" name="inputValidate">
<div ng-repeat="field in fields.test">
<div style="width:600px">
<div ng-form name="validMe" style="width:58%;float:left">
<input id="input{{$index}}" name="input{{$index}}" type="text" ng-model="field.value" ng-pattern="/^[0-9]{1,10}([,.][0-9]{1,2})?$/" required>
<span style="color: #a94442" ng-show="validMe['input\{\{$index\}\}'].$error.pattern">Not a valid number!</span>
<span style="color: #a94442" ng-show="validMe['input\{\{$index\}\}'].$error.required ">Number Required!</span>
</div>
<div style="width:20%;float:left">
<input type="button" value="Remove" ng-click="delete($index)"/>
</div>
</div>
</div>
</form>
i have a issue about angular validation.
My case point:
I have 2 textfields and 1 button in a form.
When page load, the button is by ng-disabled with ng-invalid status.
Then type something text in a textfield, the button ng-disabled to unlock.
[Problem] When i clear all text in a textfield such as delete key with keyboard, the button ng-disabled not to unlock status.
If not use 「required」with textfield.
I already put in jsfiddle
<div ng-controller="validationCtrl">
<form name="xyzForm" novalidate>
<input
type="text"
name="name"
ng-model="xname"
ng-class="{'has-error': xyzForm.name.$invalid && !xyzForm.name.$pristine}"
/>
<input
type="number"
name="age"
ng-model="xage"
ng-class="{'has-error': xyzForm.age.$invalid && !xyzForm.age.$pristine && xyzForm.age.$dirty}"
/>
<div>
<button ng-click="submit()" ng-disabled="xyzForm.$invalid || xyzForm.$pristine">Submit</button>
<span>invalid : {{xyzForm.$invalid}}</span>
<span>pristine : {{xyzForm.$pristine}}</span>
</div>
</form>
</div>
I consider you don't want to user "Required" Attribute for both textfield and as below you can use
<div ng-app="appX">
<div ng-controller="validationCtrl">
<form name="xyzForm" novalidate>
<input
type="text"
name="name"
ng-model="xname"
ng-class="{'has-error': xyzForm.name.$invalid && !xyzForm.name.$pristine}"
/>
<input
type="number"
name="age"
ng-model="xage"
ng-class="{'has-error': xyzForm.age.$invalid && !xyzForm.age.$pristine && xyzForm.age.$dirty}"
/>
<div>
<button ng-click="submit()" ng-disabled="(xyzForm.$invalid || xyzForm.$pristine) || !xage || xname
==''">Submit</button>
<span>invalid : {{xyzForm.$invalid}}</span>
<span>pristine : {{xyzForm.$pristine}}</span>
</div>
</form>
</div>
</div>
I write a angular application that has a form with input type submit but ng-click doesnt work
<div ng-show="!addDate && tk.doTime != null && tk.test2" class="change-item-btn" ng-click="addDate = true"> <span class="add-on"><i class="icon-time"></i></span>{{tk.doTime}}</div>
<form class="dateForm" ng-show="addDate" style="background-color:#dbf8f8;color: #152626; padding: 20px 20px 50px; margin-top:10px;" >
<div style="display:inline-block;width:50%;">
delivery
<div class="control-group">
<div class="controls">
<div class="input-append">
<input name="date" class="input-small datepicker form-control" placeholder="date" type="text" style="color:black" />
</div>
</div>
</div>
</div>
<div style="display:inline-block;width:50%;">
delivery time
<div class="input-append bootstrap-timepicker">
<input name="clock" style="color:black;direction:ltr;text-align:center" class=" input-small timepicker form-control" type="text">
</div>
</div>
<button ng-click="addDate = false" class="sbmtInput">cancel</button>
<input name="submit" type="submit" ng-click="deleting()" value="action" class="sbmtInput addDateTo" rel="{{tk.id}}-{{index}}-{{list.id}}" />
</form>
deleting function is
$scope.deleting= function(){
$scope.addDate = false;
}
addDate value change to false but doesnt have any effect on html view
where i go wrong?
This is because ng-click is in div with ng-show and in submit input as well.
When you click the event is done twice and in divs ng-click addDate is set to true again.
In order to make this work, you should prevent propagation in input.
To do this, use stopPropagation method, available in your scope $event object.
So the input code should be:
<input name="submit" type="submit" ng-click="deleting(); $event.stopPropagation();" value="action" class="sbmtInput addDateTo" rel="{{tk.id}}-{{index}}-{{list.id}}" />