I want to disabled Proxy input field for selection till Attestor is selected , Currently both fields are readOnly, if attestor is not selected user should not be able to select Proxy. I am new to angularJS please help how we can implement this logic using ng-model.
main.html
<div class="row">
<div class="form-group col-md-6">
<label for="attestorWorker" class="col-md-4">Attestor:</label>
<div class="col-md-8">
<input type="text" class="form-control" id="attestorWorker" required
ng-model="attestorDTO.attestorWorker" name="attestorWorker"
ng-click="openAttestorSearch()" readonly="readonly"/>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label for="proxyWorker" class="col-md-4">Proxy :</label>
<div class="col-md-8">
<input type="text" class="form-control" id="proxyWorker" required
ng-model="attestorDTO.proxyWorker" name="proxyWorker"
ng-click="openProxySearch()" readonly="readonly"/>
</div>
</div>
</div>
You can use the ng-disabled attribute.
<input type="text" class="form-control" id="proxyWorker" required
ng-model="attestorDTO.proxyWorker" name="proxyWorker"
ng-click="openProxySearch()" readonly="readonly"
ng-disabled="!attestorDTO.attestorWorker"/>
Changing:
ng-disabled="!attestorDTO.attestorWorker"
to the condition that you want it to be disabled
Related
I have the following html form
<form name="enviarAutorizacao" id="enviarAutorizacao" novalidate>
<label class="form-label-gray">autorization</label>
<input class="form-control col-sm-6" ng-model="current.autorizacao" id="autorizacao" ui-mask="" maxlength="20" required>
<div class="form-group col-sm-8">
<label class="form-label-gray"> Value </label>
<div class="form-group col-sm-2 form-label-gray">
<label>$</label>
</div>
<div class="form-group col-sm-9">
<input class="form-control" maxlength="16" ng-model="current.valor" required id="valor">
</div>
</div>
<div class="form-group col-sm-12">
<button class="btn btn-default" ng-disabled="enviarAutorizacao.$invalid || enviarAutorizacao.$pristine" id="submit-representante-estabelecimento" ng-click="validateAssociate()">click me</button>
</div>
</form>
I am trying to enable the submit button, only when the 2 inputs are filled, but it is enabling right when I type on the first input (autorizacao).
I tried few alternatives, like change "ng-disabled="enviarAutorizacao.$invalid" to "ng-disabled="!enviarAutorizacao.$valid", but didnt works.
What is wrong with this html ?
If you use enviarAutorizacao.autorizacao.$invalid you will know if the "autorizacao" input is Invalid.
[form id].[input name].[$valid or $invalid or $dirty...]
So your code should be like this:
I changed the input's name and submit's ng-disabled
<form name="enviarAutorizacao" id="enviarAutorizacao" novalidate>
<label class="form-label-gray">autorization</label>
<input class="form-control col-sm-6" ng-model="current.autorizacao" id="autorizacao" ui-mask="" maxlength="20" name="autorizacao" required>
<div class="form-group col-sm-8">
<label class="form-label-gray"> Value </label>
<div class="form-group col-sm-2 form-label-gray">
<label>$</label>
</div>
<div class="form-group col-sm-9">
<input class="form-control" maxlength="16" ng-model="current.valor" required id="valor" name="valor">
</div>
</div>
<div class="form-group col-sm-12">
<button class="btn btn-default" ng-disabled="enviarAutorizacao.autorizacao.$invalid || enviarAutorizacao.valor.$invalid" id="submit-representante-estabelecimento" ng-click="validateAssociate()">click me</button>
</div>
</form>
Try using the ids of the actual inputs individually as the arguments to ng-disabled.
Alternatively you could check the validity of current.autorizacao and current.valor and use those.
I want to display the data of the selected user in angular 2. I make a service to get the data from API
getUserById(id: string): Promise<User> {
const url ='api/user/${id}';
return this.httpClient.get(url)
.toPromise()
.then(response => response.json() as User)
.catch(this.handleError); }
and this is my controller
user: User;
constructor(private userService: UserService) {
userService.getUserById('45835708-f55a-40fb-878f-33b9c920e196')
.then(hasil => this.user = hasil)
.catch(this.handleError);
}
and here is my template
<div class="form-group">
<label class="col-sm-2 control-label">FULL NAME</label>
<div class="col-sm-6">
<input class="form-control" type="text" value="" disabled>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">USER NAME</label>
<div class="col-sm-6">
<input class="form-control" type="text" value="" disabled>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">PASSWORD</label>
<div class="col-sm-6">
<input class="form-control" type="password" value="" disabled>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">DATE OF BIRTH</label>
<div class="col-sm-6">
<input class="form-control" type="text" value="" disabled>
</div>
</div>
How to display the json to my template? Do I make correct service and controller?
You can choose to use template driven forms or reactive driven forms.
this.user object can be a model to that form, and when you input something into html input elements, object will update automatically:
<div class="form-group">
<label class="col-sm-2 control-label">FULL NAME</label>
<div class="col-sm-6">
<input class="form-control" type="text" value="" [(ngModel)]="user.fullName" disabled>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">USER NAME</label>
<div class="col-sm-6">
<input class="form-control" type="text" value="" [(ngModel)]="user.username" disabled>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">PASSWORD</label>
<div class="col-sm-6">
<input class="form-control" type="password" value="" [(ngModel)]="user.password" disabled>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">DATE OF BIRTH</label>
<div class="col-sm-6">
<input class="form-control" type="date" value="" [(ngModel)]="user.dateOfBirth" disabled>
</div>
</div>
If you want to add some validator, you should go with Reactive forms:
https://angular.io/docs/ts/latest/guide/reactive-forms.html
The principle here is to create a form group and define individual properties with their initial values and validator.
First make sure you have FormsModule imported in your module. Then... remember to use ngModel to bind the user to the form.
But, forms do not care about ngModel unless there is also a name attribute on each field:
<input class="form-control" name="fullName" [ngModel]="user.fullName">
OR
ngModelOptions in each field:
<input class="form-control" [ngModelOptions]="{standalone: true}" [ngModel]="user.fullName">
Here's a demo for you with usage of the name attribute:
Plunker
<label for="telno" class="control-label col-sm-3">
<font color="#FF0000">*</font><strong>Telephone number</strong>
</label>
<div class="col-sm-3"
<input type="text" class="form-control" name="telno" id="telno" maxlength="10"/>
</div>
i m not able to display textbox for telephone number
why it is not displaying textbox using html
You need to close the div tag . please use as below
<label for="telno" class="control-label col-sm-3"><font color="#FF0000">*</font><strong>Telephone number</strong></label>
<div class="col-sm-3">
<input type="text" class="form-control" name="telno" id="telno" maxlength="10"/>
</div>
check this
fiddle
<div class="col-sm-3">
<input type="text" class="form-control" name="telno" id="telno" maxlength="10"/>
</div>
Close of div tag not proper, here is the error <div class="col-sm-3"
do this <div class="col-sm-3">
I want to validate 7 alphanumeric for 1 part of my form but it keeps telling me to follow the format even when I usepattern="[a-zA-Z0-9]".
Here is my code :
<div class="control-group form-group">
<div class="control">
<label for="admin">Admin Number:
<input type="text" class="form-control" id="admin" name="admin" placeholder="eg. 123456A" required pattern="\[a-zA-Z0-9]{7}"/>
</label>
</div>
</div>
and just asking but is it possible to validate radio box without javascript
I changed it to this and now it seems to be working:
<div class="control-group form-group">
<div class="control">
<label for="admin">Admin Number:
<input type="text" class="form-control" id="admin" name="admin" placeholder="eg. 123456A" pattern="[0-9A-Za-z]{7}"/>
</label>
</div>
</div>
I have kendo validation on one div that is working , another div i have AngularJS directive but i could not implement validation and make it requried field. How can i make required field like i have in Business process name ?
so far tried code...
div1.html
<div class="row">
<div class="form-group col-md-6 fieldHeight">
<label for="name" class="col-md-5 required">Business Process Name:</label>
<div class="col-md-7">
<input type="text" class="form-control" id="name"
ng-model="processDTO.processLongName"
placeholder="Process Name" maxlength="256" name="processName"
data-required-msg="Business Process Name is required" required><span
class="k-invalid-msg" data-for="processName"></span>
</div>
</div>
<div class="form-group col-md-6 fieldHeight">
<label for="countries" class="col-md-5 required">Geographic Locations:</label>
<div class="col-md-7">
<div multiselect-dropdown-tree ng-model="nonPersistentProcess.geoLocations" disable-children="true" options="treeviewOptions"></div>
</div>
</div>
</div>