I have a form for a user to update his/her information. One of the fields is for their Date of Birth (DOB) that it is autopopulated from the database.
The problem is that if the user doesn't need to update the DOB and since the DOB is a required field the form validation thinks that it is blank and it forces to user to interact or update the field.
This is the current code:
<input type="date" name="dob" ng-model="profileData.dob" class="form-control" value="<?php echo $row["dob"]; ?>" ng-init="profileData.dob='<?php echo $row["dob"]; ?>'" />
So what I did is that I updated the code by adding ng-change. This will allow the form to be submitted. The problem with this is that if the user really needs to update the DOB it will not update. It will keep whatever is showing in the field value:
<input type="date" name="dob" ng-model="profileData.dob" class="form-control" value="<?php echo $row["dob"]; ?>" ng-init="profileData.dob='<?php echo $row["dob"]; ?>'" ng-change="profileData.dob='<?php echo $row["dob"]; ?>'" />
How do I change the input date field so that it works correctly when it doesn't need to be updated and also works well when it needs to be updated?
Thank you in advance.
I solved in a very simple way:
HTML:
<input type="date" id="dob" name="dob" ng-model="profileData.dob" class="form-control" ng-init="profileData.dob" />
Js:
$scope.profileData = {
dob: new Date('<?php echo $row["dob"]; ?>')
};
Related
Here is my Code and so have many fields like this :
<input type="text" pInputText class="form-control" name="companyName" [(ngModel)]="company.Name" required #companyName="ngModel"
/>
<label>Company Name</label>
<p class="ui-message ui-messages-error ui-corner-all" *ngIf="(!companyName.valid && companyName.touched)">
Company Name is required
</p>
Instead of defining separate message for all mandatory/invalid fields, can't I use single message with place holder for field name? So whenever I want to change message, I can manage this with single line change.
e.g. "${field} is required, ${field} is not valid etc."
please give me a example if this can do
The first solution that crossed my mind was just wrap the error messages in a function:
var displayError = (field) => `${filed} is required`;
And on the HTML
<input type="text" pInputText class="form-control" name="companyName" [(ngModel)]="company.Name" required #companyName="ngModel"/>
<label>Company Name</label>
<p class="ui-message ui-messages-error ui-corner-all" *ngIf="(!companyName.valid && companyName.touched)">
{{ displayError('Company name') }}
</p>
ng-invalid after selecting date from datepicker, but becomes valid if typed. Please help.
I worked around this by hiding the datepicker and showing an empty input text field when the value is null and then swapping/showing the datepicker when it is clicked.
<input
ng-if="my_date || set_my_date"
type="text"
id="my_date"
name="my_date"
datetime-picker="MM/dd/yyyy h:mma"
is-open="my_date"
ng-focus="set_my_date = true"
class="form-control"
ng-model="my_date"
placeholder="my date"
ng-readonly="true"
ng-required="true"
/>
<input
ng-if="!my_date && !set_my_date"
class="form-control"
placeholder="my date"
ng-click="set_my_date = true"
/>
ng-invalid class is added from angular when a required field is invalid (e.g empty), make sure the ng-model relative field , formvalue.workshopeDate, is correctly populated when you trigger the click.
Trying to figure out form related angular technique. Im new to angularjs and started digging deep into it.
Well im trying to get current and permanent address in a form. When the "same as current" checkbox is checked then value of current address field is written in permanent address field ng-value.
While permanent address field is typed first and then we checked "same as current" not overwriting field from current address ng-value.
Current Address field
<input type="text" class="h-textform form-control" id="exampleInputEmail3" name="current_address_line1" ng-model="contacts.current_address_line1" placeholder="House Number">
checkbox :
<input type="checkbox" value="disable" checked="checked" ng-model="sameascurrent">Same as Current
Permenent Address :
<input type="text" class="h-textform form-control" ng-if="sameascurrent" id="exampleInputEmail3" ng-value="contacts.current_address_line1" name="permenent_address_line1" ng-model="contacts.permenent_address_line1" ng-disabled="sameascurrent" placeholder="House Number">
<input type="text" class="h-textform form-control" ng-if="!sameascurrent" id="exampleInputEmail3" name="permenent_address_line1" ng-model="contacts.permenent_address_line1" ng-disabled="sameascurrent" placeholder="House Number">
Any help would be appreciated.
http://plnkr.co/edit/rX3iT5lX2JEIArvxL8SK?p=preview
Move overwriting logic to controller. For permanent address use similar inputs as for current (no ng-value only ng-model) plus ng-disabled.
<input type="text" class="h-textform form-control" id="exampleInputEmail3" name="permenent_address_line1" ng-model="contacts.permenent_address_line1" ng-disabled="sameascurrent" placeholder="House Number">
<input type="text" class="h-textform form-control" id="exampleInputEmail3" name="permenent_address_line2" ng-model="contacts.permenent_address_line2" ng-disabled="sameascurrent" placeholder="Street Name">
Add ng-change to checkbox input:
<input type="checkbox" ng-change="change()" value="disable" checked="checked" ng-model="sameascurrent">Same as Current
and function called when checkbox is changed in controller. This function overwrites model of permanent address if sameascurrent is true.
$scope.change = function () {
if ($scope.sameascurrent) {
$scope.contacts.permenent_address_line1 = $scope.contacts.current_address_line1;
$scope.contacts.permenent_address_line2 = $scope.contacts.current_address_line2;
}
}
See http://plnkr.co/edit/aEuG62gaUh5U4Xl5ZUTv?p=preview
<input type="text" class="h-textform form-control" ng-if="sameascurrent" id="exampleInputEmail3" !!ng-value="contacts.current_address_line1"!! name="permenent_address_line1" ng-model="contacts.permenent_address_line1" ng-disabled="sameascurrent" placeholder="House Number">
Remove ng-value from input. Ng-value is used to set values like objects to the radio box or smth like this.
UPD: Just remember. When you are using ng-model, this means that value from input will be dynamicly set to the your model. So you can bind it from model to anywhere you wont
ng-value just set the filed once, for realtime data clone,you can write your own $watch method inside the controller:
function sync(){
if($scope.sameascurrent){
var contacts = $scope.contacts;
contacts.permenent_address_line1 = contacts.current_address_line1;
contacts.permenent_address_line2 = contacts.current_address_line2;
}
}
$scope.$watch('contacts',sync,true);
$scope.$watch('sameascurrent',sync);
http://plnkr.co/edit/EPoprBLeNxlwDlklWuiC?p=preview
For more detail on $watch, you can refer angular docs for $scope
I have a date input like this:
<input type="date" name="input" ng-model="date" placeholder="yyyy-MM-dd" class="form-control"/>
Now I want show calendar when click the input. How to controller the date calendar?
<input type="date"> is implemented on the level of the browser. I use Chrome and I do see datetime field.
I have an field where the id is set via php:
<input name="user_id" type="text" value="<?php echo $this->r->user_id; ?>" ng-model="entry.user_id" >
But the value does not appear in the field.
How can I set it from php to angular js?
Set the initial value of the ng-model using ng-init instead:
<input name="user_id" type="text" ng-model="entry.user_id" ng-init="entry.user_id = <?php echo $this->r->user_id; ?>" >
I'm not sure about the php syntax, but this will set value for you as long as the controller has an entry object available.
<input type="text" ng-model="enquiry.companyName" ng-init="enquiry.companyName='<?php echo $_SESSION['COMPANYNAME'] ?>'" name="companyName">
Sigle quote around php block is important.
You might want to try ng-value as well. Might fit your situation better. I didn't come across it until today:
<input name="user_id" type="text" ng-value="<?php echo $this->r->user_id; ?>" ng-model="entry.user_id" >