Develop Reference

How do I programmatically add a readonly or disable attribute to a form input?

I have an Angular application with a form. I would like to temporarily turn two of the inputs fields into a readonly or disable state. How do I programmatically add a readonly or disable attribute to these form input?
Find below my angular component.html code:
<div>
<div class="group material-input">
<input [(ngModel)] ="phone[0]" type="text" id="phoneTab1" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>Phone Number</label>
</div>
<div class="group material-input">
<input [(ngModel)] ="amount[0]" type="text" id="amountTab1" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>Amount</label>
</div>
</div>
<div class="sign-btn text-center">
<a (click)="makeMPESAPayment(1)" class="btn btn-lg btn-gradient-01 text-white">
Skuma
</a>
</div>
...in the component.ts code I have tried the code below which hasnt worked at all:
I have tried with document.getElementById("phoneTab1").disabled = true; and
document.getElementById("phoneTab1").disabled = true;
How do I programmatically add a readonly or disable attribute to these form input?

You can just add a property isDisabled type boolean for example on your component.ts, and use it in your template : [disabled] = 'isDisabled'.

jQuery Validation Plugin check if "total_cost" is greater than "user_credit" value in fields

I am having hard time understand how jQuery Validation Plugin works with custom method.For all the guides here i found, are either for input form or static values but mine is a bit different.
I have 2 div's like 2 values and one is value of "user_credit" which store how much user have credit. And another is "total_cost" which store total cost of some special options.
The problem and difference that i have and didn't found on any guide is that my "total_cost" is dynamically changed based on previous checkbox values.
Here's part of code from that:
<div class="row">
<div class="col-lg-12">
<label for="link_to_video">Link to video <i class="fa fa-question-circle" aria-hidden="true" data-toggle="tooltip" title="Add link to your product video. Youtube videos will be automatically embedded"></i></label>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" name="show_video" id="show_video" value="1" data-price="40">
</span>
<input type="text" class="form-control" name="link_to_video" id="link_to_video" placeholder="https://youtube.com/watch?v">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<label for="link_to_product">Link to product <i class="fa fa-question-circle" aria-hidden="true" data-toggle="tooltip" title="Add link to your product"></i></label>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" name="show_product" id="show_product" value="1" data-price="40">
</span>
<input type="text" class="form-control" name="link_to_product" id="link_to_video" placeholder="http://yourwebsite.com/product-page">
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-inline">
<div class="col-lg-12">
<h4>Your credit <span class="label label-default" id="user_credit">2000</span></h4>
</div>
</div>
</div>
<div class="row">
<div class="form-inline">
<div class="col-lg-12">
<h4>Total cost <span class="label label-default" id="total_price">0</span></h4>
</div>
</div>
</div>
And here is part of code that change "total_price" value when some of checkboxes are checked from above.
$inputs=$('#show_product,#show_video').change(function(){
var total=0;
$inputs.filter(':checked').each(function(){
total+= $(this).data('price');
});
$("#total_price").text(total);
});
And another thing is that all guides activate validator in javascript while i activate in form it self
<form action="" name="createListingForm" id="createListingForm" method="POST" role="form" data-toggle="validator" enctype="multipart/form-data">
I have been following documentation from here https://jqueryvalidation.org/documentation/ and searched for alot of guides but no luck in finding solution.

First off, you can not validate the text within a span container. Using this plugin, you can only validate textarea, select, certain types of input elements, and elements with the contenteditable attribute... and they all must be within a form container.
Secondly, if you dynamically change the value of one of these form inputs, you simply call the .valid() method to programmatically trigger validation on this input.
$('#myinput').valid(); // trigger a validation test of #myinput element

How to clear text id in javascript

I have a one text box search, and one button,when i add the text and click button, related data will be getting but when i click another search.that is taking same id,previous id not clearing. how to clear that id
<div class="col-lg-4 col-sm-4 col-xs-12">
<i class="glyphicon glyphicon-search"></i>
<div class="form-group">
<input type="text" class="form-control" id="isbncollegeid" data-ng-model="isbncollege" placeholder=" Search By college ISBN" name="isbncollegeid">
</div>
</div>
<div class="col-sm-4">
<br />
<div class="form-group">
<input type="hidden" id="bookcollgeIsbn" name="bookcollgeIsbn" />
<button type="button" class="btn btn-sky" id="IsbntcolDetails" data-ng-disabled="LibraryIsbnForm.$invalid" data-ng-click="DetailscolByISBN()">Get Details<i class="fa fa-exclamation"></i>
</button>
<button type="button" class="btn btn-sky" id="clear" data-ng-click="ClearISbnCollege()">Clear<i class="fa fa-exclamation"></i>
</button>
</div>
</div>

In your ClearISbnCollege just make isbncollege model empty
$scope.ClearISbnCollege = function() {
$scope.isbncollege = "";
}
When you will click the Clear button, input will be emptied.

You can use below line of code after getting results in javascript:
document.getElementById('elementid').value = "";
in Jquery:
$('#elementid').val("");

ng-valid not triggering on input hidden when value is updated via <button> ng-click

I am new to AngularJS. I have a simple form that the submit button becomes enabled if the all required fields are ng-valid. If I type in box LOAN AMOUNT the class ng-valid is added to this input.
However, on the second field I am using buttons to update the value of a hidden field using ng-click. This works and the value updates on click, however the class remains as ng-invalid and the submit button is disabled. I am guessing it is somehow to do with Angular not knowing this has been updated, but am unable to find a solution. I would be grateful for any help.
<body ng-app="validationApp" ng-controller="mainController">
<form name="userForm" id="appform" ng-submit="submitForm(userForm.$valid)" action="results.php" method="post" novalidate validate-non-visible-controls> <!-- novalidate prevents HTML5 validation since we will be validating ourselves -->
<div class="container" style="max-width:1000px;">
<div class="row">
<div class="col-md-4">
<!-- LOAN AMOUNT -->
<div class="form-group" ng-class="{ 'has-error' : userForm.amount.$invalid && !userForm.amount.$pristine }">
<label>How much do you need? <span class="red">*</span></label>
<input type="number" name="amount" id="amount" class="form-control searchfield" ng-model="user.amount" ng-maxlength="6" required>
<p ng-show="userForm.amount.$invalid && !userForm.amount.$pristine" class="help-block">Loan amount is required.</p>
<p ng-show="userForm.amount.$error.maxlength" class="help-block">Loan amount too high.</p>
</div>
</div>
<div class="col-md-8">
<!-- BUSINESS TYPE -->
<div class="form-group" ng-class="{ 'has-error' : userForm.type.$invalid && !userForm.type.$pristine }">
<label>What type of business do you own? <span class="red">*</span></label>
<input type="hidden" name="type" ng-model="data.type" value="{{selected}}" required/>
<button type="button" class="ltd opt" ng-click="selected = 1;userForm.type.$valid" ng-class="{active: selected == 1}">Limited Company</button>
<button type="button" class="st opt" ng-click="selected = 2" ng-class="{active: selected == 2}">Sole Trader</button>
<button type="button"class="ps opt" ng-click="selected = 3" ng-class="{active: selected == 3}">Partnership</button>
<button type="button"class="llp opt" ng-click="selected = 4" ng-class="{active: selected == 4}" >LLP</button>
<p ng-show="userForm.type.$invalid && !userForm.type.$pristine" class="help-block">Business type is required.</p>
</div>
</div>
</div><button type="submit" class="bluebtn biggerBtn" ng-disabled="userForm.$invalid">FINANCE MY BUSINESS <i class="fa fa-caret-right"></i></button>
</body>

You must change the ng-model to:
<input type="hidden" name="type" ng-model="selected" value="{{selected}}" required/>

How to disable the button only if have an input field error

<td>
<div>
<ng-form name="mrpForm">
<input type="number" min="1" name="mrp" step="any" ng-model="sku.mrp" style="width:80px;" / required>
<span style="color:red;" ng-if="(mrpForm.mrp.$error.min)">Must be greater than zero</span>
</ng-form>
</div>
</td>
<td>
<ng-form name="packQtyform">
<input type="number" name="skupackQty" min="2" max="100" ng-model="sku.packQty" style="width:100px;" />
<span style="color:red;" ng-if="(packQtyform.skupackQty.$error.min)">Must be greater than 1</span>
<span style="color:red;" ng-if="(packQtyform.skupackQty.$error.max)">Maximum 100</span>
</ng-form>
</td>
<td>
<button class="col-md-12 col-sm-12 col-xs-12 btn btn-sm blue" ng-disable="!sku.mrp"
ng-click="addsku(sku);>Save</button>
</td>
In the above code, I want to make save button disable only if a sku.packQty value is an error and if sku.mrp empty,sku.packQty can be empty but it should not be an error If error message save button must be disabled.

You can use form-name.$invalid for this.
<button class="col-md-12 col-sm-12 col-xs-12 btn btn-sm blue" ng-disable="!sku.mrp || mrpForm.$invalid || packQtyform.$invalid"
ng-click="addsku(sku);>Save</button>
I couldn't understand the validation conditions but $invalid would do.

I would create a function like:
$scope.valid_form() {
//here are all the terms, return false if something is wrong
return true;
}
And then, in my html button I will simply say:
ng-disabled="!valid_form()"