I am trying to disable the save button untill date is not picked. it is disabled but its not able to enbale untill i dont press any key from the keyboard.please tell me what i am doing wrong and thanks in advance.
<div class = "form-group" ng-class="{ 'has-error' : Form.fromTime.$invalid && !Form.fromTime.$pristine }">
<label for = "fromTime"> From Time:
<img src = "images/required.gif" alt = "Required" class = "required-star">
</label>
<div class='input-group date' id='fromTime' >
<input type='text' class="form-control" name="fromTime" ng-model = "fromTime" required />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<p ng-show="Form.fromTime.$invalid && !Form.fromTime.$pristine" class="help-block">From Time is required.</p>
</div>
<button type="button" class="col-sm-2 btn btn-primary" ng-click="scheduleCall()" style="margin-left:10px;" ng-disabled="Form.$invalid"> Save </button>
change:
ng-disabled="Form.$invalid"
to:
ng-disabled="Form.fromTime.$invalid"
You have to use like below
ng-disabled="Form.fromTime.$invalid"
Formname: Form;
Input field name : fromTime;
Input field state: $invalid
If i understand your problem correctly, you need to use a date input.
Now save button will be disabled until a valid date is picked.
function Ctrl($scope) {
$scope.fromTime = '';
$scope.scheduleCall = function() {};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<div ng-app>
<div ng-controller="Ctrl">
<form name="Form">
<div class="form-group"
ng-class="{ 'has-error' : Form.fromTime.$invalid && !Form.fromTime.$pristine }">
<label for="fromTime">From Time:</label>
<div class='input-group date' id='fromTime'>
<input type='date' class="form-control" name="fromTime" ng-model="fromTime" required />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<p ng-show="Form.fromTime.$invalid && !Form.fromTime.$pristine"
style="font-size: 11px; color: red;">
From Time is required.
</p>
</div>
<button type="button" ng-click="scheduleCall()" ng-disabled="Form.$invalid">Save</button>
</form>
</div>
</div>
Related
I have a requirement where I have to keep the button to be disabled initially and enable it only when the length of my input is 10.
<div class="form-group">
<label for="MSISDN_Value" class="m-r-10">MSISDN:</label>
<input type="number"
onkeyPress="if(this.value.length === 10) return false;"
[(ngModel)]="MSISDN_Value"
id="MSISDN_Value"
name="MSISDN_Value"
class="form-control display-inline-block width70p m-b-5">
</div>
<div class="form-group">
<button class="btn btn-primary m-l-65" type="submit"
[disabled]="true">Search</button>
</div>
I tried [disabled] = "MSISDN_Value.length !== 10" but it did not work, there are many solutions that disable buttons, but I couldn't find any solution which enables buttons in Angular5.
Hii the problem is you are checking integer value with === operator which is returning false. see my below code.
<div class="form-group">
<label for="MSISDN_Value" class="m-r-10">MSISDN:</label>
<input type="number"
#num
max=10
(change)="toggle2($event)"
id="MSISDN_Value"
name="MSISDN_Value"
class="form-control display-inline-block width70p m-b-5">
</div>
<div class="form-group">
<button class="btn btn-primary m-l-65" type="submit"
[disabled]="this.num.value==10?false:true">Search{{this.num.value===10}}</button>
</div>
//.ts file
toggle2(event){
console.log(event.target.value)
}
After searching, I took the help of events and used (input) function binding and fired an event on even.target.value changes to toggle [isDisabled]
<div class="form-group">
<label for="MSISDN_Value" class="m-r-10">ISMSDN/IMEI:</label>
<input type="number" onkeyPress="if(this.value.length === 10) return false;" (input)="onSearchChanges($event.target.value)" [(ngModel)]="MSISDN_Value" id="MSISDN_Value" name="MSISDN_Value" class="form-control display-inline-block width59p m-b-5">
</div>
<div class="form-group">
<button class="btn btn-primary m-l-96" type="submit" [disabled]="searchDisabled">Search</button>
</div>
component.ts file
onSearchChanges(value) {
if(value.length === 10){
this.searchDisabled = false;
} else{
this.searchDisabled = true;
}
}
I am trying to create a form in a NgbModal, I can open an initialize the form however when I press submit button, nothing happens.
Here is HTML code;
<ng-template #content let-c="close" let-d="dismiss">
<div class="modal-header">
<h4 class="modal-title" id="modal-basic-title">Give your feedback</h4>
</div>
<form [formGroup]="addForm" (ngSubmit)="onSubmit()">
<div class="modal-body">
<div class="form-group">
<label>Title</label>
<input type="text" formControlName="title" class="form-control" [ngClass]="{ 'is-invalid': submitted && addForm.controls.title.errors }" />
<div *ngIf="submitted && addForm.controls.title.errors" class="invalid-feedback">
<div *ngIf=" addForm.controls.title.errors">* Title is required</div>
</div>
</div>
<div class="form-group">
<label>Comment</label>
<textarea type="text" rows="4" cols="50" formControlName="text" class="form-control" [ngClass]="{ 'is-invalid': submitted && addForm.controls.text.errors }"></textarea>
<div *ngIf="submitted && addForm.controls.text.errors" class="invalid-feedback">
<div *ngIf=" addForm.controls.text.errors">* Comment is required</div>
</div>
</div>
<div class="form-group">
<label>Rate</label><br>
<ngb-rating formControlName="rate" max="5" [starTemplate]="rate">
</ngb-rating>
</div>
</div>
<div class="modal-footer">
<button style="margin-left: 5px" type="submit" class="btn btn-success pull-right">Save</button>
<button type="button" class="btn btn-outline-danger pull-right" (click)="c('cancelled')">Cancel</button>
</div>
</form>
</ng-template>
<ng-template #rate let-fill="fill" let-index="index">
<span class="star" [class.filled]="fill === 100">★</span>
</ng-template>
<ng-template #rate let-fill="fill" let-index="index">
<span class="star" [class.filled]="fill === 100">★</span>
</ng-template>
<button *ngIf="authService.currentUserValue" type="button" style="height: 50px" (click)="open(content)" class="btn btn-outline-primary pull-right" data-toggle="modal">
give your feedback
</button>
My open button works fine and also I can close modal, but somehow save is not working. Additionally my onSubmit method is like;
onSubmit() {
this.submitted = true;
const data = {
productId:this.currentProduct.productId,
userId: this.authService.currentUserValue.userId,
title: this.addForm.controls.title.value,
text: this.addForm.controls.text.value,
rating: this.addForm.controls.rating.value,
};
this.loading = true;
this.commentService.addComment(data).subscribe(
data => {
this.success = true;
this.router.navigate(['/']);
},
error => {
this.error = error;
this.loading = false;
}
)
}
No error is thrown or no action happens, clicking is not working. How can I fix this?
Your component doesn't know which modal to close. You need to pass the NgbModal reference to the submission function.
<form [formGroup]="addForm" (ngSubmit)="onSubmit(content)">
'content' refers to the template reference of the modal.
onSubmit(modal: NgbModal) {
modal.dismiss(); // Add wherever you need
}
And just as a heads up, if you...
<form [formGroup]="addForm" (ngSubmit)="onSubmit()" #f="ngForm"> /* Last attribute added */
and then create add a ViewChild before the constructor...
#ViewChild('f') ngForm: NgForm;
you'll be able to access ngForm's submission status by this.ngForm.submitted rather then setting them yourself manually. Angular docs for NgForm
I'm working with ReactJS and this success notification thing is not working as expected. When I crop the image and click on Confirm Crop button as shown in image below, I get the Loading loader and after the image is cropped it shows Image Saved! notification below the Confirm Crop button. But I want the Loading and Image Saved on side of the button, someone else worked on this before me and I am unable to solve this. What could fix the problem?
This is the form I'm working on below:
return (
<form className="form-horizontal" ref="form" onSubmit={this.handleForm}>
<fieldset>
<legend>
{this.state.success === true ? (
this.props.history.push(`/${serviceId}`)
) : this.state.success === false ? (
<Alert bsStyle="danger">
<strong>An error occured!</strong>
<ol>
{this.state.errorMessages.map((err, index) => (
<li key={index}>{err.message}</li>
))}
</ol>
</Alert>
) : (
""
)}
</legend>
<div className="row-fluid">
<div className="span5">
<div
className={
this.state.invalid.name === true
? "control-group error"
: "control-group"
}
>
<label className="control-label" htmlFor="name">
Name: <i className="required">*</i>
</label>
<div className="controls">
<input
type="text"
required
id="name"
defaultValue={this.state.form.name}
name="name"
onChange={this.handleState}
/>
<span className="help-inline">Field required</span>
</div>
</div>
<div
className={
this.state.invalid.image === true
? "control-group error"
: "control-group"
}
>
<label className="control-label" htmlFor="image">
Image: <i className="required">*</i>
</label>
<div className="controls">
<input
type="file"
name="image"
defaultValue={this.state.form.image}
onChange={this.handleState}
accept="image/gif, image/png, image/jpeg, image/jpg"
required
/>
<span className="help-inline">File Type: png, gif, jpg</span>
<div>
<ReactCrop
src={
this.state.companyImage === null
? ""
: this.state.companyImage
}
crop={this.state.crop}
onImageLoaded={this.handleImageLoaded.bind(this)}
onComplete={this.handleOnCropComplete.bind(this)}
onChange={this.handleOnCropChange.bind(this)}
keepSelection={true}
/>
</div>
{this.state.croppedImageUrl && (
<img alt="Crop" src={this.state.croppedImageUrl} />
)}
<br />
{this.state.croppedImageUrl ? (
<div>
<button
className="btn btn-primary"
type="button"
onClick={this.handleState}
>
Confirm Crop
</button>
</div>
) : null}
</div>
</div>
{this.state.imageFetching && (
<div className="controls">
<p className="imageWait">Loading...</p>
</div>
)}
{this.state.showImageSuccess && (
<div className="controls">
<p style={{ color: "green" }}>Image Saved! </p>
</div>
)}
<div
className={
this.state.invalid.address
? "control-group error"
: "control-group"
}
>
<label className="control-label" htmlFor="address">
Address <i className="required">*</i>
</label>
<div className="controls">
<textarea
rows="4"
required
cols="20"
id="address"
name="address"
onChange={this.handleState}
defaultValue={this.state.form.address}
/>
<span className="help-inline">Field required</span>
</div>
</div>
<div
className={
this.state.invalid.telephone
? "control-group error"
: "control-group"
}
>
<label className="control-label" htmlFor="telephone">
Telephone: <i className="required">*</i>
</label>
<div className="controls">
<input
type="number"
step="any"
required
name="telephone"
defaultValue={this.state.form.telephone}
onChange={this.handleState}
/>
<span className="help-inline">Field required</span>
</div>
</div>
<div
className={
this.state.invalid.city === true
? "control-group error"
: "control-group"
}
>
<label className="control-label" htmlFor="city">
City: <i className="required">*</i>
</label>
<div className="controls">
<input
type="text"
required
id="city"
defaultValue={this.state.form.city}
name="city"
onChange={this.handleState}
/>
<span className="help-inline">Field required</span>
</div>
</div>
<div
className={
this.state.invalid.country === true
? "control-group error"
: "control-group"
}
>
<label className="control-label" htmlFor="country">
Country: <i className="required">*</i>
</label>
<div className="controls">
<input
type="text"
required
id="country"
defaultValue={this.state.form.country}
name="country"
onChange={this.handleState}
/>
<span className="help-inline">Field required</span>
</div>
</div>
<div className="row-fluid">
<div className="span12">
<button
className={disabledColor}
type="submit"
disabled={this.state.disabled}
ref={button => {
this.submitButton = button;
}}
>
Submit
</button>
</div>
</div>
</div>
</div>
</fieldset>
</form>
);
How it looks right now:
The "Image Saved!" notification also appears in the same place as Loading as evident from code above, I need them on the side of the button.
This link provides the entire file and css associated with it that I'm working: https://gist.github.com/BikalNepal/0fe035e8845a5bb92c477abd9c003a50
CSS: https://gist.github.com/BikalNepal/73a3db6127ebda4b5489be8df3143d43
You need to re-structure you react element and that's all.
{this.state.croppedImageUrl ? (
<div className="flexContainer">
<button
className="btn btn-primary"
type="button"
onClick={this.handleState}
>
Confirm Crop
</button>
{this.state.imageFetching && (
<div className="controls">
<p className="imageWait">Loading...</p>
</div>
)}
{this.state.showImageSuccess && (
<div className="controls">
<p style={{ color: "green" }}>Image Saved! </p>
</div>
)}
</div>
) : null}
NOTE: All what I've done is: wrapped the elements that need to share same horizontal space, in one parent div.
And in the css file introduce a class:
.flexContainer {
display: flex;
justify-content: space-between;
align-items: center;
}
This might lead to lot of spacing between your button and notification. If so, try adding max-width: requiredValue; in the definition of the flexContainer class.
I have this HTML template:
<div class="container">
<div class="row">
<div class="col-md-12">
<div data-role="dynamic-fields">
<div class="form-inline">
<div class="form-group">
<label class="sr-only" for="field-name">Link </label>
<input type="text" class="form-control" id="field-name" placeholder="Link"
[(ngModel)]="HrefLink" name="HrefLink">
</div>
<span>-</span>
<div class="form-group">
<label class="sr-only" for="field-value">Label</label>
<input type="text" class="form-control" id="Label" placeholder="Label"
[(ngModel)]="HrefLabel" name="HrefLabel">
</div>
<button class="btn btn-danger" data-role="remove">
<span class="glyphicon glyphicon-remove"></span>
</button>
<button class="btn btn-primary" data-role="add">
<span class="glyphicon glyphicon-plus"></span>
</button>
</div> <!-- /div.form-inline -->
</div> <!-- /div[data-role="dynamic-fields"] -->
</div> <!-- /div.col-md-12 -->
</div> <!-- /div.row -->
</div>
In this simple form, I can add one or more inputs. This is the live example: https://bootsnipp.com/snippets/VPRlZ
My question is: How can I get the values of all added fields inside my angular component ? I can add the directive ngModel like above in every input but then all directives will have the same name and I'll not get all values?
Unfortunately, I can't place the ngModel in a higher level in the div of form-group ...
Please tell me if my question is clear or you need more information.
Why not you base the quantity of input in an array of Objects(InputModel it is a custom interface or class) and finally use *ngfor to show them.
InputModel
{
input_value: string,
index_of: number,
isDelete: boolean, //if false is "+" if true is "x"
}
Component.ts
inputValues: InputModel[] = [];
count: number = 0;
OnInit{
this.inputValues.push({
input_value:"",
index_of: this.count,
isDelete: true
});
}
addMore(){
this.inputValues.push({
input_value:"",
index_of: this.count++,
isDelete: false
});
}
Html Template
<div *ngFor="let input of inputValues">
<input [(ngModel)]="input.input_value" />
<!-- TODO button with 'x' or '+' depends of input.isDelete -->
</div>
I have the below popup where the user can encode item information.
My requirement is that, when Foreign Currency and Conversion Rate are both have values, it should multiply Foreign Currency * Conversion Rate to get the Amount. And when both Foreign Currency and Conversion Rate are 0, then Amount field should accept user input.
Currently, I have the below HTML.
<div class="form-group" show-errors>
<label for="foreignCurrency" class="control-label col-md-3 text-muted">Foreign Currency</label>
<div class="col-md-9">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-dollar fa-lg"></i> </span>
<input type="number" id="foreignCurrency" name="foreignCurrency" class="form-control" placeholder="Foreign Currency" ng-model="vm.newItem.newItemEnt.ForeignCurrency" value="{{vm.newItem.newItemEnt.ForeignCurrency || 0}}" min="0" />
</div>
<p class="help-block" ng-if="perksFrm.foreignCurrency.$error.min">The minimum foreign currency value is 0</p>
</div>
<div class="form-group" show-errors>
<label for="convRate" class="control-label col-md-3 text-muted">Conversion Rate</label>
<div class="col-md-9">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-money"></i></span>
<input type="number" id="convRate" name="convRate" class="form-control" placeholder="Conversion Rate" ng-model="vm.newItem.newItemEnt.ConversionRate" ng-required="vm.newItem.newItemEnt.ForeignCurrency" value="{{vm.newItem.newItemEnt.ConversionRate || 0}}" min="0" />
</div>
<p class="help-block" ng-if="perksFrm.convRate.$error.required">The conversion rate is required</p>
<p class="help-block" ng-if="perksFrm.convRate.$error.min">The minimum conversion rate is 0</p>
</div>
<div class="form-group" show-errors>
<label for="amount" class="control-label col-md-3 text-muted">Amount</label>
<div class="col-md-9">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-money"></i></span>
<input type="number" id="amount" name="amount" class="form-control" placeholder="Amount" ng-model="vm.newItem.newItemEnt.Amount" required />
</div>
<p class="help-block" ng-if="perksFrm.amount.$error.required">The first name is required</p>
</div>
In Amount html, I can do it like this {{vm.newItem.newItemEnt.ForeignCurrency * vm.newItem.newItemEnt.ConversionRate}}. But, what if they have a 0 value and my requirement is to accept the user input from Amount textbox.
Any advise to achieve my requirements?
TIA
According to your requirment, I tried to provide you answer.
Please find Code for this, also JS fiddle demo.
HTML
<style>
.error{
border-color:red;
}
</style>
<div ng-app="myApp" ng-controller="myCtrl">
<div class="row">
<div class="col-lg-2">Foreign Currency</div>
<div class="col-lg-2"><input type="number" ng-model="FCurrency" /></div>
</div>
<div class="row">
<div class="col-lg-2">Rate</div>
<div class="col-lg-2"><input type="number" ng-model="Rate" /></div>
</div>
<div class="row">
<div class="col-lg-2">Amount</div>
<div class="col-lg-2"><input ng-class="{error : RateAmount <= 0}" ng-disabled="isAmountDisable"
type="number" ng-model="RateAmount" /></div>
</div>
</div>
JS
var myApp = angular.module("myApp", []);
myApp.controller('myCtrl', function ($scope) {
$scope.RateAmount = 0;
$scope.isAmountDisable = false;
function setRateAmount() {
if ($scope.FCurrency > 0 && $scope.Rate > 0) {
$scope.RateAmount = ($scope.FCurrency * $scope.Rate);
$scope.isAmountDisable = true;
}
else {
$scope.RateAmount = 0;
$scope.isAmountDisable = false;
}
}
$scope.$watch('FCurrency', function (newval, oldval) {
setRateAmount();
});
$scope.$watch('Rate', function (newval, oldval) {
setRateAmount();
});
});
JS Fiddle Demo
Did you tried to use ng-change on foreignCurrency and convRate input.
when those input change you can calcul your amount value and disable it.
if they are both 0, you can enable it.
Something like this :
function change() {
var foreignCurrency = vm.newItem.newItemEnt.ForeignCurrency;
var conversionRate = vm.newItem.newItemEnt.ConversionRate;
if (foreignCurrency === 0 && conversionRate === 0) {
vm.enableAmout = true;
} else {
vm.enableAmout = false;
vm.vm.newItem.newItemEnt.Amount = foreignCurrency * conversionRate;
}
}