i'm using camunda 7.2
In my process i have two user tasks (the first one a simple form to insert data, and the second one to show the same form readonly).
I'm using embedded forms.
I have the following form but i have a problem: using the ng-if directive i don't able to instantiate process variable, while if i use ng-show it works.
<form role="form" name="form" cam-form class="form-horizontal">
<div ng-if="typeRequest == 'firstCase'">
<h4 class="text-center">title</h4>
<!-- Oggetto -->
<div class="form-group">
<label for="oggetto" class="col-sm-4 control-label">Oggetto:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="oggetto" cam-variable-name="oggetto" cam-variable-type="String" required="required">
</div>
</div>
<!-- Nota descrittiva -->
<div class="form-group">
<label for="notadescrittiva" class="col-sm-4 control-label">Nota descrittiva:</label>
<div class="col-sm-8">
<textarea class="form-control" rows="3" id="notadescrittiva" cam-variable-name="notaDescrittiva" cam-variable-type="String"></textarea>
</div>
</div>
<!-- Data -->
<div class="form-group">
<label for="data" class="col-sm-4 control-label">Data:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="data" cam-variable-name="data" cam-variable-type="String" required="required">
</div>
</div>
<!-- Indirizzo -->
<div class="form-group">
<label for="indirizzorichiesta" class="col-sm-4 control-label">Indirizzo:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="indirizzorichiesta" cam-variable-name="indirizzo" cam-variable-type="String" required="required">
</div>
</div>
</div>
Please, any idea?
Thanks in advance
I think this is because ng-if does not renders anything in the DOM.
You probably should use ng-show instead.
Related
I want to load data of a selected row in a form in order to update it. I successfully had the data loaded in the form, the but the problem is when I use ng model to save the data all the stuff have been put in the form fields disappear.
<div class="panel-body pan" ng-if="loadedpr">
<form action="#">
<div class="form-body pal">
<div class="row">
<div class="col-md-2">
<div class="form-group">
<label for="refprojet" class="control-label">
Référence Projet *</label>
<input id="refprojet" type="text" value="{{loadedpr.ref_projet}}" class="form-control" disabled ng-model="ref_projet"/>
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label for="intitulefr" class="control-label">
Intitulé *</label>
<input id="intitulefr" type="text" value="{{loadedpr.intitule_fr}}" class="form-control" ng-model="intitule_fr" />
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label for="ctot" class="control-label"> Coût Total (TND) *</label>
<input id="ctot" type="text" value="{{loadedpr.cout_total}}" ng-model="cout_total" class="form-control" disabled ng-model="cout_total" />
</div>
</div>
</div>
<div class="form-group">
<label for="description" class="control-label">
Description</label><textarea id="description" rows="3" value="{{loadedpr.description}}" ng-model="description" class="form-control"></textarea>
</div>
<div class="form-actions text-center pal">
<button type="submit" class="btn btn-primary" ng-click="upadateProjet()">Valider</button>
</div>
</div>
</form>
this is the angularjs method:
$scope.updateProjet= function(){
$scope.projet={'ref_projet':$scope.refprojet,'intitule_fr':$scope.intitule_fr,'description':$scope.description,cout_total':$scope.cout_total};
$http.put("/editprojet", $scope.projet)
.success(function(data,status,headers,config){
});
}
rest controller
#RequestMapping(value="/editprojet",method=RequestMethod.PUT)
public Projet editProjet(#RequestBody Projet p) {
return projetMetier.editProjet(p);
}
you are using button type="submit"
it will clear the form use button tag
<button></button>
$scope.updateProjet= function(projData){
$http.put("/editprojet", projData)
.success(function(data,status,headers,config){
}).error(function(data){
console.log(data)
});
}
<div class="panel-body pan" ng-if="loadedpr">
<form action="#">
<div class="form-body pal">
<div class="row">
<div class="col-md-2">
<div class="form-group">
<label for="refprojet" class="control-label">
Référence Projet *</label>
<input id="refprojet" type="text" value="{{loadedpr.ref_projet}}" class="form-control" disabled ng-model="proj.ref_projet"/>
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label for="intitulefr" class="control-label">
Intitulé *</label>
<input id="intitulefr" type="text" value="{{loadedpr.intitule_fr}}" class="form-control" ng-model="proj.intitule_fr" />
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label for="ctot" class="control-label"> Coût Total (TND) *</label>
<input id="ctot" type="text" value="{{loadedpr.cout_total}}" ng-model="proj.cout_total" class="form-control" disabled ng-model="proj.cout_total" />
</div>
</div>
</div>
<div class="form-group">
<label for="description" class="control-label">
Description</label><textarea id="description" rows="3" value="{{loadedpr.description}}" ng-model="proj.description" class="form-control"></textarea>
</div>
<div class="form-actions text-center pal">
<button type="button" class="btn btn-primary" ng-click="upadateProjet(proj)">Valider</button>
</div>
</div>
</form>
</div>
have you tried removing the value attribute? this happened to me when I once added DOM forms on the fly, I managed by using jquery to force capture by:
$(this).find('.inputClass').val();
this sort of jequery is already embeded inside Angular so no need to add the the library.
I am developing a JHipster generated Angular + Spring + Java + HTML5 application
I have an issue that keeps coming up in several projects I worked around it previously, but I would love to be able to actually solve it
I have the following html template:
<div class="form-group row">
<label class="control-label col-md-2">ID</label>
<div class="col-md-4">
<input type="text" class="form-control" id="id" name="id"
ng-model="orgLabAMR.id" readonly/>
</div>
<label class="control-label col-md-2">organism</label>
<div class="col-md-4">
<input type="text" class="form-control"
placeholder="Search"
ng-model="orgLabAMR.organism"
uib-typeahead="organism as organism.organismName for organism in organisms | filter:$viewValue | limitTo:8"
typeahead-editable="false"/>
</div>
</div>
<div class="form-group row">
<label class="control-label col-md-2" for="field_conventionalBloodCultureMethods">Conventional Blood Culture
Methods</label>
<div class="col-md-4">
<select class="form-control" name="field_conventionalBloodCultureMethods" id="field_conventionalBloodCultureMethods" ng-model="orgLabAMR.conventionalBloodCultureMethods"
ng-options="convBloodCulture as convBloodCulture for convBloodCulture in convBloodCultures"/>
</div>
<label class="control-label col-md-2" for="field_automatisedBloodCultureMethods">Automatised Blood Culture
Methods</label>
<div class="col-md-4">
<select class="form-control" id="field_automatisedBloodCultureMethods" ng-model="orgLabAMR.automatisedBloodCultureMethods"
ng-options="autoBloodCultMethod as autoBloodCultMethod for autoBloodCultMethod in autoBloodCultMethods"/>
</div>
</div>
<div class="form-group row">
<label class="control-label col-md-2" for="field_methodsOfIdentification">Methods Of Identification</label>
<div class="col-md-4">
<select class="form-control" id="field_methodsOfIdentification" ng-model="orgLabAMR.methodsOfIdentification"
ng-options="idMethod as idMethod for idMethod in idMethods"/>
</div>
<label class="control-label col-md-2" for="field_identificationDetails">Identification Details</label>
<div class="col-md-4">
<input type="text" class="form-control" name="identificationDetails" id="field_identificationDetails"
ng-model="orgLabAMR.identificationDetails"
/>
</div>
</div>
<div class="form-group row">
<label class="control-label col-md-2" for="field_standardSusceptibilityTestingMethod">Standard Susceptibility
Testing Method</label>
<div class="col-md-4">
<select class="form-control" id="field_standardSusceptibilityTestingMethod" ng-model="orgLabAMR.standardSusceptibilityTestingMethod"
ng-options="standardSuscTestMethod as standardSuscTestMethod for standardSuscTestMethod in standardSuscTestMethods"/>
</div>
<label class="control-label col-md-2" for="field_molecularSusceptibilityTestingMethod">Molecular Susceptibility
Testing Method</label>
<div class="col-md-4">
<select class="form-control" id="field_molecularSusceptibilityTestingMethod" ng-model="orgLabAMR.molecularSusceptibilityTestingMethod"
ng-options="molecularSuscep as molecularSuscep for molecularSuscep in molecularSusceps"/>
</div>
</div>
<div class="form-group row">
<label class="control-label col-md-2" for="field_automatisedSusceptibilityTestingMethod">Automatised Susceptibility
Testing Method</label>
<div class="col-md-4">
<select class="form-control" id="field_automatisedSusceptibilityTestingMethod" ng-model="orgLabAMR.automatisedSusceptibilityTestingMethod"
ng-options="automaSusceTestMethod as automaSusceTestMethod for automaSusceTestMethod in automaSusceTestMethods"/>
</div>
<label class="control-label col-md-2" for="field_susceptibilityTestingMethodsDetails">Susceptibility Testing Methods
Details</label>
<div class="col-md-4">
<input type="text" class="form-control" name="susceptibilityTestingMethodsDetails"
id="field_susceptibilityTestingMethodsDetails"
ng-model="orgLabAMR.susceptibilityTestingMethodsDetails"
/>
</div>
</div>
<div class="form-group row">
<label class="control-label col-md-2" for="field_susceptibilityMethodsComments">Susceptibility Methods
Comments</label>
<div class="col-md-10">
<input type="text" class="form-control" name="susceptibilityMethodsComments"
id="field_susceptibilityMethodsComments"
ng-model="orgLabAMR.susceptibilityMethodsComments"
/>
</div>
</div>
<button class="btn btn-danger margin10" ng-click="removeOrganismLaboratoryAMR(study, orgLabAMR)">remove Organism
Laboratory {{orgLabAMR.id}}
</button>
When loading it in localhost it shows all elements fine, like this:
But when loading in production it doesn't parse all elements, it shows up like this:
Now the funny thing(s) are that I have several templates just like this one for other entities and they all load their elements just fine.
When in browser and looking up the elements it doesn't show them in the code snippets, although when checking in jenkins workspace the html file is exactly the same as in the local version.
After trying with prod profile local debug and checking all minified files generated by gulp and finding all html elements in them I decide to focus on the markups, the magic came from changing autoclosable <select /> tags to <select></select> tags
Now the view comes up perfectly, but I am still very confused as for why this would only happen when on production as the browser is exactly the same one.
Have html code like below
<form class="form-horizontal" name="myform">
<div class="modal-body" novalidate>
<div class="form-group" >
<label class="col-sm-2 control-label" for="input-username">Username (*)</label>
<div class="col-sm-10">
<input type="text" name="username" ng-pattern="/^[a-zA-Z0-9]{4,10}$/" placeholder="Username" id="input-username" class="form-control" data-ng-model="newuser.username">
<div class="help-block">Username must be 4-10 characters.</div>
</div>
</div>
</div>
</form>
using ng-pattern copy in an example but it not right work for me, when type in under 4 character, html css not highlight red border, and when type in 4 character css not highlitght green border. I don't know why I can not show right css
Patters arent usually used for checking length... You can do ng-minlength and ng-maxlength for that like this:
<form class="form-horizontal" name="myform">
<div class="modal-body" novalidate>
<div class="form-group" >
<label class="col-sm-2 control-label" for="input-username">Username (*)</label>
<div class="col-sm-10">
<input type="text" name="username" ng-minlength="4" ng-maxlength="10" ng-pattern="/^[a-zA-Z0-9]{4,10}$/" placeholder="Username" id="input-username" class="form-control" data-ng-model="newuser.username">
<div class="help-block" ng-if="myform.$invalid">Username must be 4-10 characters.</div>
</div>
</div>
</div>
</form>
I am facing a problem with AngularJS. I have made an application where a user can
select a value from a dropdown list. If the user presses the "add" button, then an array is created that holds all his selections. I want to populate a textbox with all these selections. I have tried ng-repeat but it creates multiple textbox with each array value. This is what I've made so far:
Controller
$scope.multiCompare= [];
// Create the function to push the data into the "multiCompare" array
$scope.newCompare = function () {
$scope.multiCompare.push($scope.compareDate);
$scope.multiComparedate = '';
};
HTML
<div class="form-group">
<label for="installation_year" class="col-sm-2 control-label">Period</label>
<div class="col-sm-4">
<select class="form-control" ng-model="compareDate" ng-options="res for res in compareDates " ng-disabled="disableFormInput()" ></select>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default" ng-click="newCompare()">Add</button>
</div>
</div>
<div class="form-group">
<label for="from_date" class="col-sm-2 control-label">Compare</label>
<div class="col-sm-4">
<div ng-repeat="num in multiCompare" track by $index>
<input class="form-control" type="text" ng-model="$parent.multiCompare[$index]">
<div> {{num}}</div>
</div>
</div>
The first image shows the result I'm getting when adding 2013 and 2014 and the second shows what I would like it to return.
Can someone help me through this?
Thanks in advance..
For rendering your Compare field input, you can take use of ngList directive. That will bind your comma(,) separated output directly to the input element.
Change
<label for="from_date" class="col-sm-2 control-label">Compare</label>
<div class="col-sm-4">
<div ng-repeat="num in multiCompare" track by $index>
<input class="form-control" type="text" ng-model="$parent.multiCompare[$index]">
<div> {{num}}</div>
</div>
</div>
TO
<label for="from_date" class="col-sm-2 control-label">Compare</label>
<div class="col-sm-4">
<input class="form-control" type="text" ng-model="multiCompare" ng-list/>
</div>
This could help you, Thanks.
I have managed to do what I wanted. I changed my html code to this:
<div class="form-group">
<label for="from_date" class="col-sm-2 control-label">Compare</label>
<div class="col-sm-4">
<div data-ng-repeat="num in multiCompare" track by $index>
<input class="form-control" type="text" ng-model="multiCompare" ng-list {{num}} ng-show="$last" />
</div>
</div>
</div>
And it worked!
Your ng-list suggestion was really helpful! Thank you very much!
I have form which contains some fields and have validated these fields by using angular.validator. The error messages are displayed under every fields. But I want to display this error messages using tooltip. For example , if some particular field is not valid , the error message should be shown on the right of the field box. I didn't found a solution from other posts of stackoverflow. How to do this ?
I want to show this field is required in a tooltip. ( by making directive) .
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">Contact No</label>
<div class="col-sm-8">
<input type="text" ng-model="proFormSubmit.contactNo" validator="[required, number]" class="form-control" id="" placeholder="" validation-message="Only numeric values are valid!">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">Profile Picture</label>
<div class="col-sm-8 companyLogo"> <img src="assets/img/user.png" alt="..." class="img-rounded col-sm-3 ">
<input type="file" id="exampleInputFile" ng-model="proFormSubmit.profilePic">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Language</label>
<div class="col-sm-8">
<select class="form-control" ng-model="proFormSubmit.language" validator="[required]">
<option></option>
<option value="english">English</option>
<option value="spanish">Spanish</option>
</select>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">Address 1</label>
<div class="col-sm-8">
<input type="text" ng-model="proFormSubmit.address1" validator="[required]" class="form-control" id="" placeholder="">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">Address 2</label>
<div class="col-sm-8">
<input type="text" ng-model="proFormSubmit.address2" validator="[required]" class="form-control" id="" placeholder="">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">City</label>
<div class="col-sm-8">
<input type="text" ng-model="proFormSubmit.city" validator="[required]" class="form-control" id="" placeholder="">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">State</label>
<div class="col-sm-8">
<select class="form-control" ng-model="proFormSubmit.state" validator="[required]">
<option></option>
<option value="Indonesia">Tamilnadu</option>
<option value="Indonesia">Kerala</option>
<option value="Indonesia">Rajasthan</option>
</select>
</div>
</div>
I use http://angular-ui.github.io/bootstrap which has a $tooltipProvider that allows you to modify behavior of the tooltip. Other than that this seems like a CSS + ng-show candidate