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>
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'm trying to make a calculator on dividing 2 variables in javascript. But I got an error like NaN. Please take a look at my code. I'm a beginner to javascript.
<script type="text/javascript">
var p_val, d_days, total_price
function calculate() {
p_val = parseInt(document.getElementById("purchased_price").value);
d_days = parseInt(document.getElementById("days"));
total_price = parseInt(p_val/d_days);
alert(total_price);
}
</script>
<div class="box-body">
<span class="text-danger"><?php echo validation_errors() ?></span>
<div class="box-body">
<div class="form-group">
<label for="exampleInputEmail1">Purchased Price </label>
<input type="text" id="purchased_price" class="form-control" value="100000">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Number Of Days</label>
<input type="text" id=days" class="form-control" >
</div>
<form action="<?=base_url()?>" method="post">
<div class="form-group">
<label for="exampleInputEmail1">Depreciation Value</label>
<input type="text" id=result" class="form-control" >
</div>
<button class="btn btn-primary" type="button" onclick="calculate()" value="calculate">Calculate</button>
</div>
<!-- /.box-body -->
<div class="box-footer">
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-3">
<button type="submit" class="btn btn-info btn-lg" >Save</button>
</div>
<div class="col-md-3">
<a href="<?=base_url()?>location/location_list/" class="btn btn-info btn-lg" >Cancel</a>
</div>
<div class="col-md-3">
</div>
</div>
</div>
</form>
</div>
Hello,
Im try to make calculator for divide 2 variable in javascript. But I got error like NaN Please look my code. I am beginner to javascript.
Just add .value to parse the value of d_days input like you did with p_val and not the whole object
d_days = parseInt(document.getElementById("days").value);
Btw, when you get an error specifying that X var is NaN, it usually means that you tried to compute mathematically something that is not a number.
I have different file inputs I want displayed once the previous one has been selected. At the moment I have
<div class="row">
<div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
<div class="input-group inputMargBtm">
<input type="text" class="form-control" id="fileOneContainer" readonly>
<span class="input-group-btn">
<span class="btn btn-primary btn-file">
Browse… <input type="file" id="fileOne" name="fileOne" class="fileGroup" accept=".jpeg,.jpg">
</span>
</span>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
<div class="filePadd">
<div class="input-group">
<div id="hideDivTwo" class="hiddenDiv">
<input type="text" class="form-control" id="fileTwoContainer" readonly>
<span class="input-group-btn">
<span class="btn btn-primary btn-file">
Browse… <input type="file" id="fileTwo" name="fileTwo" class="fileGroup" accept=".jpeg,.jpg" disabled="true">
</span>
</span>
</div>
</div>
</div>
</div>
</div>
But I also have a lot more hidden rows for up to 10 inputs. So I dont need to create new code for each input within my Javascript, I am trying to display things dynamically. Essentially, if I select a file, it should display the next file input.
At the moment I have this
$(".fileGroup").on('change',function(){
var id = $(this).attr('id');
if (id.length) {
$(this).parents('.row').nextSibling('.row').child('.hiddenDiv').css("display", "table-footer-group");
}
});
So I get the id of the changed fileGroup. I then attempt to get its parents row, then get the next row, and display its hidden div. At the moment this does not seem to work. What would be the best way to display the next input block?
Thanks
Try with this code:
$(".fileGroup").on('change',function(){
var $next_element = $(this).parents('.row').next('.row').find('input[type="file"]');
if ($next_element.length) {
$next_element.prop('disabled', false);
}
});
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<div class="row">
<div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
<div class="input-group inputMargBtm">
<input type="text" class="form-control" id="fileOneContainer" readonly>
<span class="input-group-btn">
<span class="btn btn-primary btn-file">
Browse… <input type="file" id="fileOne" name="fileOne" class="fileGroup" accept=".jpeg,.jpg">
</span>
</span>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
<div class="filePadd">
<div class="input-group">
<div id="hideDivTwo" class="hiddenDiv">
<input type="text" class="form-control" id="fileTwoContainer" readonly>
<span class="input-group-btn">
<span class="btn btn-primary btn-file">
Browse… <input type="file" id="fileTwo" name="fileTwo" class="fileGroup" accept=".jpeg,.jpg" disabled="true">
</span>
</span>
</div>
</div>
</div>
</div>
</div>
The code is rather simple:
1. grab .row parent
2. look for the next element with .row class
3. find an file input in the next .row element
4. if the input exists, set its disabled attribute to
false
How to get a formId that is generated by using a jsp using jquery?
<c:url var="updateSubUserDetails" value="/employer/recruiters/updateSubUserDetails"/>
<form id="updateform${subUser.employerId}" action="${updateSubUserDetails}" method="post" >
<div class="modal-body">
<input type="hidden" name="subUserId" value="${subUser.employerId}"/>
<div class="form-group">
<input type="text" id="subUserName${subUser.employerId}" name="subUserName" class="form-control " value="${subUser.firstName}" placeholder="Edit Sub User Name"/>
</div>
<div class="form-group">
<input type="text" id="subUserEmail${subUser.employerId}" name="subUserEmail" class="form-control " value="${subUser.emailId}" onchange="checkMail(${subUser.employerId})" placeholder="Edit Email"/>
</div>
<span id="avialabilityMessage${subUser.employerId}"></span>
<div class="form-group">
<input type="text" id="subUserMobile${subUser.employerId}" name="subUserMobile" class="form-control " value="${subUser.mobileNumber}"placeholder="Edit Contact No"/>
</div>
<sec:csrfInput/>
<div class="modal-footer">
<input type="button" id="muEditButtonID" onclick="updateSubUserDetails(${subUser.employerId})" class="btn btn-warning btn-lg glyphicon glyphicon-ok-sign" value="Update">
</div>
</div>
</form>
How to get above dynamically generated form id in javascript jquery? Please assist me.
//if you sure there is only one form
document.forms[0]
//else
document.querySelector('[id^="updateform"]')
so, if you want to get id just add .id
//if you sure there is only one form
document.forms[0].id
//else
document.querySelector('[id^="updateform"]').id
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.