I am rendering a CustomUser Sign Up form in a particular URL. While I could get the password field to work in form.as_p, I am struggling to replicate the form field when rendering each form field individually.
I have tried to render form.password and form.password1 but they are not working.
Following is the section of my signup.html. PLEASE NOTE {{ form.as_p}} does the job.
{{ form.unit_floor.errors }}
<label for="{{ form.unit_floor.id_for_label }}">Unit No: # .
</label>
{{ form.unit_floor }}
{{ form.unit_unit.errors }}
<label for="{{ form.unit_floor.id_for_label }}"> - </label>
{{ form.unit_unit }}
</div>
<div class=“fieldWrapper”>
{{ form.password.errors }}
<label for="{{ form.password.id_for_label }}">Password: </label>
{{ form.password }}
</div>
Figured this stuff out. Thanks to the Django Documentation. The point was to add the following in the CustomUser creation class:
password1 = forms.CharField(label='Password', widget=forms.PasswordInput)
password2 = forms.CharField(
label='Password confirmation', widget=forms.PasswordInput)
Be sure to import from django import forms
Related
I have a page that will hide/show additional elements when an option is selected:
<div ng-app>
<div ng-controller="ctrl">
opt: <select ng-model="model.opt" ng-options="item.id as item.text for item in model.opts"></select>
<br/> <span ng-show="model.opt > 1">
alt: <input type="checkbox" ng-model="model.alt" />
</span>
<div> <pre>{{ model | json }}</pre>
</div>
</div>
</div>
http://jsfiddle.net/v7wsdj74/
How would I setup to get notification when the "ng-hide" is evaluated so that the model fields being hidden can be set back to some default values (in this case null)?
Thanks
Perhaps something like this?
scope.$watch('myParameter', (value) => {
// if myParameter is false set it to null?
}
What you can do, is reset the model on changes:
<select ng-model="..." ng-options="..." ng-change="model.alt = null"></select>
https://jsfiddle.net/bfrola/wzpha8c3/
You can also define a more complex reset function and use ng-change="reset()". Hope this helps.
Question
I was wondering what the AngularJS "best practice" way of getting a label for a field is. With jQuery you just query using a "label for" query then extract the text. While it's possible to do it this way with AngularJS, something just doesn't feel right about it.
Assume you have something like this in your HTML:
<form name="MyForm" ng-controller="Ctrl">
<label for="MyField">My spoon is too big:</label>
<input type="text" size="40" id="MyField" ng-model="myField" />
<br /><br />
You entered {{ myField }} for {{ myField.label }}
</form>
The controller internal is pretty simple:
$scope.myField = 'I am a banana.';
Basically I want to populate the myField.label in the output with "My spoon is too big."
What I'm Doing Now
All I am doing right now is executing a query that pulls the data similar to the jQuery methodology ($("label[for='MyField']")). Then, if that doesn't exist I am just pulling the placeholder text. It works, but it seems like a bit of overhead.
What I'm Trying to Accomplish
I want some custom form validation and I want to include the label in the message. I just need to pull the label text so that I can write it extremely generically and then not have to worry about people switching i18n data in dynamically later in the game.
Fiddle
Per the suggested solution:
https://jsfiddle.net/rcy63v7t/7/
You change your HTML to the following:
<label for="MyField">{{ myFieldLabel }}</label>
<input type="text" size="40" id="MyField" ng-model="myField" />
and your JS to the following:
$scope.myFieldLabel = 'My spoon is too big:';
then later, you can get/set its value just as easily:
if ($scope.myFieldLabel === 'My spoon is too big:') {
$scope.myFieldLabel = 'New label:';
}
Note that new AngularJS best practices call for always using a "dot" in a field reference. It would fit perfectly here if you did something like:
<label for="MyField">{{ myField.label }}</label>
<input type="text" size="40" id="MyField" ng-model="myField.value" />
and JS:
$scope.myField = {
value: '',
label: 'My spoon is too big:'
};
Then you can always easily access $scope.myField.label and $scope.myField.value.
Let's say in your controller you have a scope variable like
$scope.myField = {};
$scope.myField.label = "Fruit name";
and your template is like
<form name="MyForm" ng-controller="Ctrl">
<label for="MyField">{{myField.label}}</label>
<input type="text" size="40" id="MyField" ng-model="myField.value" />
<br /><br />
You entered {{ myField.label }} for {{ myField.label }}
</form>
By this field label will come dynamically. Apply custom validation in input field as per your requirement.
Hope I understand exactly what you wants.
Just put your label text in the input title and you can use a "#" directive. You can also use this to make sure the label id matches.
<label for="{{myfield_control.id}}">{{myfield_control.title}}</label>
<input type="text" size="40" id="MyField" ng-model="myField" title="My spoon is too big:" #myfield_control >
<br /><br />
You entered {{ myField }} for {{ myfield_control.title }}
myField is your ngModel. myfield_control is a reference to your input control.
I use Angular Translate to translate my webapp. I can translate some label, phrase but when i want to translate a phrase which contains a link. The text raw is displayed.
I want to display a check box :
My json file :
"cgu":"Accept our Terms and conditions"
My check box in form :
<div class="form-group">
<div class="">
<label for="cgu">
<input type="checkbox" id="cgu" ng-model="cgu" checked>
{{"global.form.cgu" | translate}}
<div ng-bind-html-unsafe="global.form.cgu | translate"></div>
</label>
</div>
</div>
Here is what is displayed: the raw text and not the link :
I've tried the solution :
stackoverflow post 1
and this one
Nothing is working.
You need to tell angular translate to compile the translated string (s. "Post compiling" at the angular translate homepage).
<span translate="{{ global.form.cgu }}" translate-compile></span>
I have a object called list in my JS file:
$scope.list = {
hospital : 'Hospital',
clinic : 'Clinic',
gp : 'GP',
denist : 'Dentist',
aae : 'A&E'
};
I'm printing these five facilities to the form like so:
<form role="form" name="addPlaceForm" ng-submit="createHospital(newHospital)">
<label class="checkbox-inline" ng-repeat="(key, value) in list">
<input type="checkbox" id="{{ key }}" value="{{ key }}" ng-model="newHospital.facilities">{{ value }}
</label>
</form>
When I submit my form, I'd like it to send the the result of the checked checkboxes to my facilities object in Firebase. My createHospital function looks like this:
var rootRef = new Firebase('URL');
var placesRef = rootRef.child('places');
function createHospital(hospital) {
placesRef.push(hospital);
}
How can I push only the checked checkboxes to an nested object called facilities which sits inside my places object that's currently in my Firebase?
Any help with this is appreciated. Thanks in advance!
I made a plunker to demonstrate how to do this at http://plnkr.co/kfH4I5Fzy2Ma14FjQj67.
You were mostly right. The changes I made was making the ng-model="newHospital.facilities[key]" and initializing $scope.newHospital to {} so it is seen in the controller. I also added a submit button.
<form role="form" name="addPlaceForm" ng-submit="createHospital(newHospital)">
<label class="checkbox-inline" ng-repeat="(key, value) in list">
<input type="checkbox" id="{{ key }}" value="{{ key }}" ng-model="newHospital.facilities[key]">{{ value }}
</label>
</form>
I have the following code
<my-template title="Client Profile">
<my-section name="personalInfo" title="Personal Informations">
<p>Please enter your personal informations</p>
<my-field type="text" name="firstName" label="First Name">
<my-field type="text" name="lastName" label="Last Name">
</my-section>
<my-section name="demographicInfo" title="Demographic Informations">
<p>Hello {{ personalInfo.firstName }}, where are you from?</p>
<my-field type="text" name="country" label="Country">
<my-field type="text" name="city" label="City">
</my-section>
<p class="output">
{{ personalInfo.firstName }} {{ personalInfo.firstName }} is from
{{ demographicInfo.city }}, {{ demographicInfo.country }}.
</p>
</my-template>
As you see there are 3 directives: myTemplate, mySection and myField. I've tried different ways to implement this but I couldn't manage to make it work. The easiest way will be to use full model names everywhere. I try to avoid this to make the syntax easier because the client will edit this templates.
Could you provide me a quick-n-dirty example on how to implement this?
Edit
I've made some progress on this but still I have to write {{ values.section.field.value }} instead of {{ section.field }}. Check it out here http://plnkr.co/edit/YKFanoJ1XE4BTgYJn1xd?p=preview
I still have several questions
Is it possible to use the shorter names for variables?
Is it possible to use variable directly inside the section without specifying the section name? (if I am in the personalInfo section I would like to be able to write {{ firstName }} instead of {{ personalInfo.firstName }})
Since nobody answered this question I will accept my partial solution.
Check it out here http://plnkr.co/edit/YKFanoJ1XE4BTgYJn1xd?p=preview