How to pass ng-models to a form - angularjs

i have a form with two differently named ng-models. I need to pass both of them with the form. How would this work? I need to pass currentItem + currentItem.Customer I am having trouble with a PdfSharp controller and I want to see if this is the reason why the Customer Values are being passed back as Null.
controller
$scope.EmailPdf = function () {
var id = $scope.currentItem.JobId
$http.get('/api/Pdf/' + id).success(function () {
$scope.PrintPreviewModal();
});
}
form
<form ng-submit="submitJob()" enctype="multipart/form-data" name="myForm">
<fieldset>
<div class="col-xs-12">
<label>Number:</label>
<input ng-model="currentItem.JobNumber" type="text" name="JobNumber">
<label>Customer:</label>
<input type="text" ng-model="currentItem.Customer.CustomerName"
typeahead="customer.CustomerName for customer in customerArray | filter:$viewValue"
typeahead-on-select="selectEditCustomer($item)">
</div>
<input ng-model="currentItem.CustomerId" type="text" ng-hide="true"/>
<div class="inline-fields">
<label >Status:</label>
<selectng-model="currentItem.JobStatus">
<option value="" selected="selected">Select</option>
<option value="Active">Active</option>
<option value="InActive">InActive</option>
<option value="Complete">Complete</option>
</select>
<label>Address:</label>
<input ng-model="currentItem.Customer.CustomerAddress" type="text">
</div>
<div class="inline-fields">
<label>Name:</label>
<input ng-model="currentItem.JobName" type="text">
<label>City:</label>
<input ng-model="currentItem.Customer.CustomerCity" type="text">
<label>St:</label>
<inputng-model="currentItem.Customer.CustomerState" type="text">
<label>Zip:</label>
<input ng-model="currentItem.Customer.CustomerZipcode" type="text">
</div>
<div class="inline-fields">
<label>Address:</label>
<input ng-model="currentItem.JobAddress" type="text">
<label>Ph:</label>
<input ng-model="currentItem.Customer.CustomerPhoneNumber" type="text">
<label>Fax:</label>
<input disabled style="width: 105px"ng-model="currentItem.Customer.CustomerFaxNumber" type="text">
</div>
<input ng-click="EmailPdf(currentItem)" type="button" value="Email" />

Well it's a bit difficult to tell exactly what you are asking here, but it sounds like you mean that you need to pass more information than the ID into your get. So you can pass the entire currentItem with all it's content like this
$http.get('/api/Pdf/' + id,angular.toJson($scope.currentItem)).....
Is that what you are trying to do?

Related

ng-change is getting called when ng-model loads value from DB

<div class="row" ng-repeat="dev in devs track by $index">
<div class="form-group col-md-2">
<select class="form-control form-control-sm"
ng-change="Function1(null)"
ng-model="dev.name" ng-required="true">
<option ng-repeat="item in dev.resc"
value="{{item.Id}}">{{item.name}}</option>
</select>
</div>
<div class="form-group col-md-2">
<input type="text"
ng-change="Function2(some value)"
ng-model="dev.startDate">
</div>
<div class="form-group col-md-2">
<input type="text" my-date-picker
class="form-control form-control-sm"
placeholder="Eg. 01/01/2018" ng-required="true"
ng-change="Function2(some value)"
ng-model="dev.endDate"
>
</div>
<div class="form-group col-md-2">
<input type="number"
class="form-control form-control-sm"
placeholder="Eg. 100"
ng-change="Function3(some value)"
ng-model="dev.loc"
ng-required=true>
</div>
<div class="form-group input-group col-md-2">
<input type="number" placeholder="Eg. 100"
class="form-control form-control-sm"
ng-change="Function3(some value)"
ng-model="dev.Add"
ng-required="true">
</div>
</div>
In above code when I iterate through devs FUNCTION2 is getting called everytime ng-model loads value, but FUNCTION1 and FUNCTION3 are not getting called. I do not want FUNCTION2 to get called, how do I achieve this? what is wrong in above code? Hope my doubt is understandable.
It seems you are formatting the input model value in my-date-picker directive that triggers ng-change event. You need to handle it accordingly. Either use $watch or handle same inside directive itself.

Using ng-model and ng-if to show elements based on value - Angular 2

So in AngularJS i was using the following to show specific form elements based on a value that is captured by a model:
<fieldset class="full-width sm-padding">
<label>Do you have any major medical conditions such as
heart conditions, cancer or diabetes?</label>
<div class="inline-flex">
<input type="radio" name="medicalCondition" value="yes"
tabindex="16" ng-model="clientDetails.medicalCondition">Yes<br>
</div>
<div class="inline-flex">
<input type="radio" name="medicalCondition" value="no"
tabindex="17" ng-model="clientDetails.medicalCondition">No<br>
</div>
</fieldset>
<fieldset class="full-width sm-padding" ng-
if="clientDetails.medicalCondition == 'yes'">
<label>Are you currently taking any medication or do you
have any other medical conditions? For example HBP, Cholesterol, Asthma,
Depression? (Both lives if cover for couple)</label>
<div class="inline-flex">
<input type="radio" name="otherMedicalCondition"
value="yes" tabindex="18" ng-
model="clientDetails.otherMedicalCondition">Yes<br>
</div>
<div class="inline-flex">
<input type="radio" name="otherMedicalCondition"
value="no" tabindex="19" ng-
model="clientDetails.otherMedicalCondition">No<br>
</div>
</fieldset>
How can I do the same thing in Angular 2?
Have tried this but not working:
<fieldset class="full-width sm-padding">
<label>Do you smoke?</label>
<div class="inline-flex">
<input type="radio" name="smoker" value="yes"
tabindex="12" [(ngModel)] = "clientDetails.smoker">Yes<br>
</div>
<div class="inline-flex">
<input type="radio" name="smoker" value="no" tabindex="13" [(ngModel)] = "clientDetails.smoker">No<br>
</div>
</fieldset>
<div class="full-width flex" *ngIf="clientDetails.smoker ===
'Yes'">
<fieldset class="one-quarter sm-padding">
<label>What do you smoke?</label>
<input list="whatDoYouSmoke" name="whatDoYouSmoke"
tabindex="14">
<datalist id="whatDoYouSmoke">
<option value="Cigarettes">
<option value="Cigars">
<option value="Pipe">
<option value="E-Cigs">
<option value="Other">
</datalist>
</fieldset>
<fieldset class="one-quarter sm-padding">
<label>How many per day?</label>
<input type="number" min="0" name="howManySmokesPerDay"
tabindex="15">
</fieldset>
</div>
What am I doing wrong?
Have tried so many different options but can't quite get it to work!
thanks
The only thing I can see is that you have typed [(ngModel)] = "", try without spaces like: [(ngModel)]="". Also noticed that in your *ngIf="clientDetails.smoker ===
'Yes'", try with a little 'y' in yes as: *ngIf="clientDetails.smoker ===
'yes'". Since you are setting the value to "yes" and not "Yes" in your radio button.
There is a case problem in the Angular version. The first 'yes' starts with a lower case y and a second 'Yes' with a upper case Y.
For anyone out there looking for a solution to this, I ended up doing the following:
<fieldset class="full-width sm-padding">
<label>Do you smoke?</label>
<div class="inline-flex">
<input type="radio" name="smoker" [(ngModel)]="smoker"
[value]="true" [checked]="smoker" /> Yes<br>
</div>
<div class="inline-flex">
<input type="radio" name="smoker" [(ngModel)]="smoker"
[value]="false" [checked]="!smoker" /> No<br>
</div>
</fieldset>
<div class="full-width flex" *ngIf="smoker">
<fieldset class="one-quarter sm-padding">
<label>What do you smoke?</label>
<input list="whatDoYouSmoke" name="whatDoYouSmoke" tabindex="14">
<datalist id="whatDoYouSmoke">
<option value="Cigarettes">
<option value="Cigars">
<option value="Pipe">
<option value="E-Cigs">
<option value="Other">
</datalist>
</fieldset>
<fieldset class="one-quarter sm-padding">
<label>How many per day?</label>
<input type="number" min="0" name="howManySmokesPerDay"
tabindex="15">
</fieldset>
</div>

make required option for inputs depending on a checkbox

I have a checkbox as following :
<input type="checkbox" name="bacLibre" id="bacLibre" ng-model="bacLibre">
and other inputs as following :
<div id="bacSection" ng-show="!bacLibre">
<div class="row">
<div class="form-group col-md-6">
<label for="regionalScore">
{{'FME_CANDIDATURE.EDUCATION_INFORMATIONS.REGIONAL_SCORE' | translate}}:
</label>
<input type="number" min="0" max="20" step="0.01" name="regionalScore" id="regionalScore" class="form-control input-lg"
ng-model="candidature.regionalScore"
required>
</div>
<div class="form-group col-md-6">
<label for="bacSecondYearFirstSemScore">
{{'FME_CANDIDATURE.EDUCATION_INFORMATIONS.BAC_SECOND_YEAR_FIRST_SEM_SCORE' | translate}}:
</label>
<input type="number" min="0" max="20" step="0.01" name="bacSecondYearFirstSemScore" id="bacSecondYearFirstSemScore"
class="form-control input-lg"
ng-model="candidature.bacSecondYearFirstSemScore"
required>
</div>
</div>
</div>
as you can see all the inputs are required I want when I check that checkbox to change the state of all the inputs in that <div id="bacSection"> to not required, and then when I uncheck that checkbox to make all the inputs required.
how can I do this ?
Angular has a directive ng-required, use that on the input with a expression that gets changed
<<input type="number" min="0" max="20" step="0.01" name="bacSecondYearFirstSemScore" id="bacSecondYearFirstSemScore"
class="form-control input-lg"
ng-model="candidature.bacSecondYearFirstSemScore"
ng-required='bacLibre'>

How to create contact form in joomla 3

I'm Trying to create custom contact form in Joomla 3 , the reason is I didn't found such big contact form.
Can somebody tell me how to do it ?
html:
<div class="col-lg-12">
<form role="form" method="POST" style="margin-top: 2.7em;" action="">
<div class="row">
<div class="form-group col-lg-4">
<label for="input1">Name</label>
<input type="text" name="contact_name" class="form-control" id="input1">
</div>
<div class="form-group col-lg-4">
<label for="input2">Mail</label>
<input type="email" name="contact_email" class="form-control" id="input2">
</div>
<div class="form-group col-lg-4">
<label for="input3">Phone</label>
<input type="phone" name="contact_phone" class="form-control" id="input3">
</div>
<div class="form-group col-lg-4">
<label for="input1">Dropdown</label>
<select class="form-control" name="bud">
<option value="a">parterowy</option>
<option value="b">piętrowy</option>
<option value="c">bliźniak</option>
<option value="c">mieszkalny</option>
<option value="c">niemieszkalny</option>
</select>
</div>
<div class="form-group col-lg-4">
<label for="input2">Size</label>
<input type="email" name="contact_email" class="form-control" id="input2">
</div>
<div class="form-group col-lg-4">
<label for="input3">Garage</label>
<select class="form-control" name="garaz">
<option value="a">wolnostojący</option>
<option value="b">w budynku</option>
<option value="c">jednostanowiskowy</option>
<option value="c">wielostanowiskowy</option>
</select>
</div>
<div class="clearfix"></div>
<div class="form-group col-lg-12">
<label for="input4">Msg</label>
<textarea name="contact_message" class="form-control" rows="6"id="input4"></textarea>
</div>
<div class="form-group col-lg-12">
<input type="hidden" name="save" value="contact">
<button type="submit" class="btn btn-default">Send</button>
</div>
</div>
</form>
</div>
Fiddle to html
I read that i need to create custom component or rebuild other, which one is better option ?
You could use Chronoforms component to create virtually any form you like.
If you need some very special custom output, you can first use the included form bulider to set up the closest approximation and modify it as you like.
As you have already made the html part, the easier way is to implement your code in a custom module or for a more advanced result in a custom component.
The official joomla way for adding extra fields to contact form is by creting a custom plugin.
If you want a commercial solution (component) I would suggest you to use breezingforms.
Hope this helps

"select form" does not sync with model

This is my template:
<div class="form-group"
ng-repeat="recipeIngredient in recipes.currentRecipe._ingredients">
<label class="col-sm-2 control-label">Ingredient {{ $index + 1 }}</label>
<div class="col-sm-10 form-inline" role="form">
<input
type="text"
class="form-control"
placeholder="quantity"
ng-model="recipeIngredient.quantity"
>
<input
type="text"
class="form-control"
ng-model="recipeIngredient._unit"
>
<select
class="form-control"
ng-model="recipeIngredient._unit"
ng-options="unit._id for unit in units"
/>
<select
ng-model="recipeIngredient._ingredient"
class="form-control"
ng-model="recipeIngredient._ingredient"
ng-options="ingredient._id for ingredient in ingredients"
/>
<button
type="button"
class="btn btn-default btn-xs glyphicon glyphicon-remove"
ng-click="recipes.currentRecipe.removeRecipeIngredient($index)">
</button>
</div>
</div>
I want to display the ingredients listed in the currentRecipe
If I use:
<input type="text" class="form-control" ng-model="recipeIngredient._unit">
I can see the value of _unit showed
But why the select form does not show at all the current value of recipeIngredient._unit?
<select
class="form-control"
ng-model="recipeIngredient._unit"
ng-options="unit._id for unit in units"
/>
I've verified the the _unit is part of the list of units
If I change the value of the select box to some value, the input text show "Object", which means the real value of the model is the unit object and not the unit._id text
ng-options="unit._id for unit in units"`
Please tell me if you want additional code
I've found out that when I use:
ng-options="unit._id for unit in units"
The text showed in the drop box is unit._id, but the ng-model will be the object in unit and not the text showed!
To correct my problem I've written like this:
<select ng-model="recipeIngredient._unit" class="form-control">
<option ng-repeat="unit in getId(units, '_id')">{{unit}}</option>
</select>
the getId is the function that return a list of _id from units

Resources