I'm working on a website and to reuse the layout on some pages I've used the angularjs ng-include directive to achieve this.
I have an ng-include on my hrFormReviewDetails.html page that includes my starter.html.
I then have an ng-include on my payrollFormReviewDetails.html and this includes the hrFormReviewDetails.html page.
The following image represents the approach to my issue:
The 1st ng-include for starter.html works as expected, however, the 2nd ng-include that includes hrFormReviewDetails.html doesn't work.
The hrFormReviewDetails.html page is used to load in the details submitted from the starter.html page and specific details needed to complete the hrFormReviewDetails.html form. This approach works fine.
The payrollFormReviewDetails.html page is used to load in the details submitted from the starter.html AND hrFormReviewDetails.html page. Specific details are then needed to complete the payrollFormReviewDetails.html form.
This is not working.
What I get is the starter.html and hrFormReviewDetails.html page loaded into the payrollFormReviewDetails.html page but no data is being loaded into the html fields. I'm getting no console errors.
My questions is, can you load multiple html pages that already have a html page using the ng-directive?
Code Snippets:
starter.html:
<form name="newStartForm" ng-submit="saveNewStarterForm(newStartForm.$valid)" novalidate autocomplete="off">
<!-- Section to contain the employee details for the new start -->
<div class="form-control">
<h3>EMPLOYEE DETAILS</h3>
<div class="margin-bottom-small"><small><strong>Fields marked with an asterisk (*) are required.</strong></small></div>
<div class="form-group" ng-class="{'alert alert-danger': newStartForm.$submitted && newStartForm.title.$invalid}">
<label class="col-lg-12 col-md-12 col-sm-12"><strong>*</strong> Title:</label>
<select id="title" class="col-lg-6 col-md-6 col-sm-6" ng-model="newStart.title" name="title" required>
<option disabled value="">Select a title...</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Miss">Miss</option>
<option value="Ms">Ms</option>
</select>
</div>
</div>
</form>
hrFormReviewDetails.html:
<form name="newStartForm" ng-submit="saveHrNewStarterReviewForm(newStartForm.$valid)" novalidate autocomplete="off">
<div ng-include="'views/starter.html'"></div>
<div class="form-control form-margin-top">
<h3>NOTES FROM HR :- RETAIL / PRIMAL</h3>
<div id="hourly-rate-container" class="form-group">
<label class="col-lg-12 col-md-12 col-sm-12">Hourly Rate (£): </label>
<input id="hourlyRate" class="col-lg-6 col-md-6 col-sm-6" type="text" ng-model="newStart.hourlyRate" ng-keypress="preventNonNumericalInputWithDecimal()" name="hourlyRate" />
</div>
</div>
</form>
payrollFormReviewDetails.html:
<form name="newStartForm" ng-submit="savePayrollNewStarterReviewForm(newStartForm.$valid)" novalidate autocomplete="off">
<div ng-include="'views/hrFormReviewDetails.html'"></div>
<div class="form-control form-margin-top">
<div class="center">
<h3>FAO PAYROLL:</h3>
<div class="form-group">
<label class="col-lg-12 col-md-12 col-sm-12">Sage Pay Reference: </label>
<input id="sagePayReference" class="col-lg-6 col-md-6 col-sm-6" type="text" ng-model="newStart.sagePayReference" name="sagePayReference" />
</div>
<div class="form-group">
<label class="col-lg-12 col-md-12 col-sm-12">Pension Type: </label>
<input id="pensionType" class="col-lg-6 col-md-6 col-sm-6" type="text" ng-model="newStart.pensionType" name="pensionType" />
</div>
</div>
</div>
</form>
NB: this is a condensed version of each of the html pages.
Related
I am making a project in Django but Im not using Django built-in forms. Rather, I am using html and bootstrap to render forms. On a page, I want to create a quiz. I am doing this via a multi-step form where I input the number of questions on the first form. Then based upon this field, when I hit next, I want to have the same number of the fields for questions and corresponding answers to appear so that I can set them. For example, if I type 5 questions and hit next, it should have 5 fields for me to enter the questions and each question field should have 4 answer fields. Is there a way to dynamically do this?
Please help :(((( This is very important.
Thank you n here is my code snippet
{% block content %}
<div class="row">
<h2 style="color: darkblue;" class="text-center">Add a Quiz</h2>
</div>
<form action="" id="add_test_form" method="POST">
<!--This form will contain the quiz information-->
{% csrf_token %}
<div class="row">
<div class="form-row">
<div class="form-group col-md-6">
<label>Name of test</label>
<input type="text" class="form-control" name="test_name" required>
</div>
</div>
</div>
<div class="row">
<div class="form-row">
<div class="form-group col-md-6">
<label>Number of questions</label>
<input type="number" id="num_qu" class="form-control" name="test_num_questions" min="1"
oninput="validity.valid||(value='')" required>
</div>
</div>
</div>
<div class="row">
<div class="form-row">
<div class="form-group col-md-6">
<label>Time( Duration) in minutes</label>
<input type="number" class="form-control" name="test_duration" min="1"
oninput="validity.valid||(value='')" required>
</div>
</div>
</div>
<div class="row">
<div class="form-row">
<div class="form-group col-md-4">
<input type="button" value="Next" id="first_next" class="btn btn-primary btn-lg mb-10">
</div>
</div>
</div>
</form>
</div>
<script>
$(document).ready(function(){
$("#first_next").click(function(e){
var num_of_qu = $("#num_qu").val();
alert(num_of_qu);
});
});
</script>
{% endblock content %}
Problem: The search box does not change size when resizing the page. I also need to make it wider, but I really can't seem how to do it, I have tried adding styles to the box such as width: 100%; Nothing seems to work
Also, you can see in the image linked below, that the select drop down box is slightly clipped off on the right hand side. I don't know what is causing this, so I don't know how to go about fixing it.
I also need to make the form fill the width of the row. Any help would be highly appreciated. Thank you!
Image of Form
How i want it too look
Code:
<header>
<div class="container">
<form action="search.php" method="get" data-toggle="validator" role="form" class="form-inline">
<div class="row">
<h2>Enter a username and choose a category to search in</h2>
<div class="input-group">
<div class="form-group">
<input name="search" type="text" class="form-control" aria-label="..." placeholder="Search a username here" required>
</div>
</div>
<div class="input-group">
<div class="form-group">
<select class="selectpicker form-control" required>
<option value="">Catagory</option>
<option value="volvo">Minecraft username</option>
<option value="saab">Minecraft UUID</option>
<option value="mercedes">Mc-Market username</option>
<option value="audi">Skype username</option>
</select>
<button type="submit" class="btn btn-default">Search</button>
</div><!-- /form-group -->
</div><!-- /input-group -->
</div> <!-- /row-group -->
</form><!-- /form-group -->
</div><!-- /container-group -->
</header>
Don't mix with other components
Do not mix form groups or grid column classes directly with input groups. Instead, nest the input
group inside of the form group or grid-related element.
See input-groups docs. Input-groups should be nested within form-groups and you haven't fully applied the correct markup for your button. It should be within <span class="input-group-btn">.
Note: from the docs,
Avoid using <select> elements here as they cannot be fully styled in WebKit browsers.
Working Example: Open using FullPage
header {
background-color: #42f4c2;
padding: 100px 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<header>
<div class="container text-center">
<h2>Enter a username and choose a category to search in</h2>
<form action="search.php" method="get" data-toggle="validator" role="form" class="form-inline">
<div class="form-group">
<input name="search" type="text" class="form-control" aria-label="..." placeholder="Search a username here" required>
</div>
<div class="form-group">
<div class="input-group">
<select class="selectpicker form-control" required>
<option value="">Catagory</option>
<option value="volvo">Minecraft username</option>
<option value="saab">Minecraft UUID</option>
<option value="mercedes">Mc-Market username</option>
<option value="audi">Skype username</option>
</select>
<span class="input-group-btn">
<button type="submit" class="btn btn-default btn-search">Search</button>
</span>
</div>
</div>
</form>
</div>
</header>
Hello I am building an angular application and I have a problem inside my stripe form. Basically I send data such as card number, expiry date and CVC code from the view to the controller's stripe callback, but I would like to add also the amount of money to pay. So I added this into my form:
<form stripe-form="handleStripe" name="myForm">
<!-- input added for the price -->
<div class="row" ng-if="!unregistered_user">
<div class="input-field col col-xs-12">
<label for="name">Amount </label>
<input name='price' type="number" id="amount" ng-model="price">
</div>
</div>
<!-- credit/debit card form -->
<div class="row">
<div class="input-field col col-xs-12">
<label for="cardn">Card number</label>
<input type="text" name="number" id="cardn" ng-model="number" payments-validate="card" payments-format="card" payments-type-model="type" ng-class="myForm.number.$card.type"/>
</div>
</div>
<div class="row">
<div class="input-field col-xs-6">
<label for="exp">Expiry</label>
<input type="text" id="exp" ng-model="expiry" payments-validate="expiry" payments-format="expiry" />
</div>
<div class="input-field col-xs-6">
<label for="cvc">CVC</label>
<input type="text" id="cvc" ng-model="cvc" payments-validate="cvc" payments-format="cvc" payments-type-model="type"/>
</div>
</div>
<div class="row">
<div class="input-field col-xs-12">
<button type="submit" class="btn btn-primary btn-large">Pay {{ price }}</button>
</div>
</div>
</form>
In the controller I have this variable:
▸ $scope.price = 0;
When I first load the page I can see that the price input has exactly the same amount that I put in the variable $scope.price. But when I changed it in the page and submit the form, $scope.price is always 0.
It's like the data is being passed from the controller to the view, but not the way back from the view to the controller.
How can I solve this?
I think your issue is with ng-if that wraps your input with price model. ng-if creates its own scope and in your case the price is connected with the scope inside ng-if and not with you controller.
You could use ng-show instead, or set the model like this: ng-model = "$parent.price" or use controllerAs syntax and you don't have to worry about this issue anymore.
I have the following form:
<form name="ff" ng-submit="formSubmit(ff)" role="form" class="form-horizontal" id="form-{{context.identifier}}" novalidate>
<div class="col-xs-12 box-shadow">
<div class="col-xs-6" style="margin-top: 1em;">
<input type='hidden' name='nodeIdentifier' value='{{context.currentStep.identifier}}' />
<input type='hidden' name='contextIdentifier' value='{{context.identifier}}' />
<div class="form-group">
<label class="control-label col-xs-4" for="requestor_name">Approve:</label>
<div class="col-xs-8">
<select name="form.field.decision">
<option value="Approved">Approved</option>
<option value="Denied">Denied</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-4" for="form.field.reason">
Reason:</label>
<div class="col-xs-8">
<input class="form-control" type="text" name="reason" required minlength='4' maxlength='255'/>
</div>
<div ng-messages="ff.reason.$error" role="alert">
<div ng-message="required">You did not enter a reason</div>
<div ng-message="minlength, maxlength">
Your reason must be between 4 and 255 characters long
</div>
</div>
</div>
<div class="form-group">
<input type="submit" name="submit" value="submit" />
</div>
</div>
</div>
</form>
Here is the code to log what gets submitted in formSubmit(data):
console.log("Data");
console.log(data);
My form is always showing valid. Why is the angular validation not working? I have included the nagular messages too.
You got no ng-model bound to your input fields. Looks like ngMessages needs those.
EDIT: found a comment on a tutorial, because I wasn't 100% sure:
tutorial comment:
fyi that not including the ng-model attribute on validated fields will
break the form validation
I have used ng-include as shown below.But it is very slow.In other words it shows tab's heading without the content of it.Later it loads the content.Which is really BAD.But if I use all the content on the same page then there is no delay.So how can I speed this ? Do you know any trick or method to do that ? Thanks.
Parent page :
<uib-tab heading="#L("PropertyInformation")">
<div ng-include="'~/App/tenant/views/propertymanagement/createPropertyForm.cshtml'"></div>
</uib-tab>
Template : createPropertyForm.cshtml
<form name="createPropertyForm" role="form" novalidate class="form-validation">
<div class="row">
<div class="col-xs-4">
<div class="form-group form-md-line-input form-md-floating-label no-hint">
<input class="form-control" type="text" name="StreetNumber" ng-model="vm.property.address.streetNumber" ng-class="{'edited':vm.property.address.streetNumber}" required maxlength="#Address.MaxLength">
<label>#L("StreetNumber")</label>
</div>
</div>
<div class="col-xs-4">
<div class="form-group form-md-line-input form-md-floating-label no-hint">
<input class="form-control" type="text" name="StreetName" ng-model="vm.property.address.streetName" ng-class="{'edited':vm.property.address.streetName}" required maxlength="#Address.MaxLength">
<label>#L("StreetName")</label>
</div>
</div>
<div class="col-xs-4">
<div class="form-group">
<label class="control-label">#L("City")</label>
<select ng-model="vm.property.address.cityId" class="form-control" ng-options="a.id as a.name + ' | '+ a.zipCode for a in vm.cities" required>
<option value="" disabled="">-- Select a City --</option>
</select>
</div>
</div>
</div>
// having lot more elements
When I use above as shown below,then no delays.But I would like to separate those html content to separate template.That is why I have tried above.
All in the same page :
<uib-tab heading="#L("PropertyInformation")">
<div ng-include="'createPropertyForm.html'"></div>
</uib-tab>
<script type="text/ng-template" id="createPropertyForm.html">
<form name="createPropertyForm" role="form" novalidate class="form-validation">
<div class="row">
<div class="col-xs-4">
<div class="form-group form-md-line-input form-md-floating-label no-hint">
<input class="form-control" type="text" name="StreetNumber" ng-model="vm.property.address.streetNumber" ng-class="{'edited':vm.property.address.streetNumber}" required maxlength="#Address.MaxLength">
<label>#L("StreetNumber")</label>
</div>
</div>
<div class="col-xs-4">
<div class="form-group form-md-line-input form-md-floating-label no-hint">
<input class="form-control" type="text" name="StreetName" ng-model="vm.property.address.streetName" ng-class="{'edited':vm.property.address.streetName}" required maxlength="#Address.MaxLength">
<label>#L("StreetName")</label>
</div>
</div>
<div class="col-xs-4">
<div class="form-group">
<label class="control-label">#L("City")</label>
<select ng-model="vm.property.address.cityId" class="form-control" ng-options="a.id as a.name + ' | '+ a.zipCode for a in vm.cities" required>
<option value="" disabled="">-- Select a City --</option>
</select>
</div>
</div>
</div>
</form>
</script>
Here is the solution.You can use $templateCache service.
app.js
appModule.run(["$templateCache", "$http", function ($templateCache, $http) {
$http.get('~/App/tenant/views/propertymanagement/tabs/createPropertyForm.cshtml', { cache: $templateCache });
}]);
cshtml page
<div ng-include="'~/App/tenant/views/propertymanagement/tabs/createPropertyForm.cshtml'"></div>
I would recommend using the template cache generator like grunt-html2js
But according angularjs documentation you can cache a template nesting the content as:
<script type="text/ng-template" id="templateId.html">
<p>This is the content of the template</p>
</script>
And then normally include the template:
<div ng-include=" 'templateId.html' "></div>