Actually, I am using this combined date and time picker, but it simply an extension of the standard , so I doubt that it is causing my problem.
Here's my HTML
<input type="text" class="form-control" datetime-picker
ng-model="campaign.start_time" is-open="startDateTimePicker.isOpen" />
I open the picker and select a date & time (which are, in any case, now by default), then I click a "Save" button which should send he data to the server.
However, when I breakpoint and look at campaign, several other fields which were bound to it, such as campaign.title (froma text input field) are set, but campaign.start_time is nulll.
Obviously, I am making a very simple mistake, but what?
The "Save" button looks like this
<button type="button" class="btn btn-outline btn-default"
ng-click="SaveCampaignEdit(campaign);"
accesskey='s' style="margin-left:10%">Save</button>
Related
I'm trying to learn forms in AngularJS 1.x. But I have error messages that are always on when it first loads. How to develop behaviour such that they are blank on load, and only red after a submit if fields were not entered? Seems to be a few states I have to use the built-in directives for.
All the elements are similar so let's just take apart this bit. Also if different for a radio and dropdown list maybe we can discuss that too.
<p>First Name:<input type="text" id="firstName" ng-model="firstName" required/>
<span style="background-color: red" ng-if="identification.firstName.$error.required">The first name is required.</span>
</p>
Do I chain a few directives with || or && ?
Behaviour I'm aiming for
How to keep the error messages off when it loads?
when I hit submit, and a field is blank, will it then activate the css red error messages?
I'd like the error messages to clear as I fill in the form without reloading.
Yeah, so any tips greatly appreciated. Doesn't have to be particularly pretty
Thanks
UPDATE 1
gist of current code
Well I took a stab at it. Still really a hot mess at this point. Don't know how to use submit to test for each field and then display the error message if blank. Also seems like a lot of duplication on the testing of field states. Is there a better way to break up that logic? Ugggghhhhh
UPDATE 2
This one's weird, the form now has all text boxes not buttons or checkboxes!? But the HTML hasn't changed. Sigh
ng-if="identification.firstName.$error.required && !$pristine"
Go search more on $pristine and $dirty validator
You can add some other property to your ng-if and set its value to true only when form is submitted.
in your html add this new property
<p>First Name:<input type="text" id="firstName" ng-model="firstName" required/>
<span style="background-color: red" ng-if="identification.firstName.$error.required && running">The first name is required.</span>
</p>
in your controller set this property to true when form is submitted
$scope.submit = function(){
$scope.running = true;
...
}
Angular and Ionic Application
I have a form that has a lot of <select> elements, The form offers the user to select from a list or if the <option> = 'Other' then I show another <input> to enter the value. I then save the value to another ng-model.
<select data-ng-model="minor.tests.liveEarth"
name="minorTestLiveEarth"
required>
<option></option>
<option>>200</option>
<option>>299</option>
<option>>500</option>
<option>>1000</option>
<option>Other</option>
</select>
</label>
<label class="item item-input item-stacked-label" ng-show="minor.tests.liveEarth === 'Other'">
<span class="input-label">Please Specify</span>
<input type="text"
placeholder="live earth other"
ng-maxlength="10"
data-ng-model="minor.tests.liveEarthOther"
name="minorTestLiveEarthOther">
</label>
I originally used <datalist> but doesn't show up on iOS.
I assigned the liveEarthOther to the same as the <select> liveEarth but it has 'Other' assigned to the ng-model, which then the user has to delete the input value Other before entering their value.
I have looked for a combobox kind of control but haven't found one that works properly.
How could I make this into a directive or any thing suitable that could perform the renaming without the user having to delete the value.
I want to use this functionality many times in the application I am building.
You may have overcomplicated things by re-using the ngModel. If you change the value minor.tests.liveEarth you'll mess up your select because anything other than the given values will cause nothing to be selected. But if you don't change minor.tests.liveEarth then you'll have to delete it when the user fills in the text input. This would then also mess up the select box!
What I would do is record the value of the text input to a different variable. Keep the ng-show="minor.tests.liveEarth === 'Other'" as it is, but change your input to
<input type="text"
placeholder="Fill in your other live earth"
ng-maxlength="10"
data-ng-model="tempVar" />
This way the input will be still be recorded, but the select won't be messed up on the ngModel change. Due to the placeholder, the user will know that they have to fill in the text box.
In your js, you'll have to create a validating function when the form is submitted along the lines of:
var validateLiveEarth = function(){
if(minor.tests.liveEarth === "Other"){
//check that tempVar meets validation
//assign tempVar to whatever form you're sending
}
}
Code:
<label class="checkbox-inline">
<input type="checkbox" name="activeFlag" id="active"
value="active" ng-checked="flag" ng-click="flag=!flag"/>
<span ng-show="flag">Yes</span><span ng-show="!flag">No</span>
<input ng-if="::flag" type="button" style="width:85px;" value="Active"
class="btn btn-success btn-xs"/>
<input ng-if="::!flag" type="button" style="width:85px;" value="Deactivated"
class="btn btn-danger btn-xs"/>
</label>
Here as you can see, i need to toggle "Yes" to "No" when checkbox is clicked, but I don't need to change my button value once it is fixed. I tried using ::falg , but it gives out "Active" only for any initial value of flag.
Suggest my error.
The double colon is using the One-time binding syntax so once it evaluates flag it doesn't watch it anymore. In this instance you'd want to remove the ::.
Also if you have any actions (like click events) on the buttons you're showing or hiding you'll need to re-bind them if you use ngif. If you use ngshow/nghide you won't. Here's a good summary of when to use which:
When to favor ng-if vs. ng-show/ng-hide?
Editing to add, if flag is always returning true when it's initially evaluated then you need to look at how you're setting your values initially as once it's set it won't be re-evaluated after the code is parsed because of the one-time binding.
I have the following HTML below in my app.
<p class="input-group">
<input ng-model="myDate" datepicker-popup="MM/dd/yyyy"
is-open="isopen" />
<span style="cursor:pointer" ng-click="opendate($event)" class="input-group-addon input-sm"><i class="glyphicon glyphicon-calendar"></i></span>
</p>
I would like to have the ngModel populated when the user enters the date in the format 4.3.2015 or 4.3.15 , but currently i am getting ngModel as undefined.
How can i tell the datepicker to accept other date formats as well?
Please check this plunkr http://plnkr.co/edit/t1f9AkHeKzvyPTQNzvxf?p=preview, This works in Chrome but not in IE . You can type 4.4.15 in chrome and it works, the same does not work in IE
If I understand correctly, you want to allow the user to decide how they enter their date format?
As far as I know, the date format needs to be defined beforehand and cannot be "detected" as the user fills it in. But, you could create an array with accepted date formats in your controller:
// Accepted date formats.
$scope.formats = ['MM/dd/yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
// Default date format.
$scope.format = $scope.formats[0];
Change the datepicker-popup attribute to datepicker-popup="{{format}}" in your HTML input field.
The user could have a dropdown (HTML select) menu in the view where they can select their preferred date format, which will change the value of $scope.format. The datepicker will change accordingly.
I have used the alt-input-formats on the DateParser to provide alternate formats
alt-input-formats (Default: []) - A list of alternate formats acceptable for manual entry.
I am looking for a way to reset the file selection, in case the user choose an invalid file for instance.
From this issue on gitHub, it appears that you need to unbind the event in order to reset the file selection, now, how do I do such a thing in AngularJS?
Markup:
<form name="applyForm" data-file-upload="model.uploadOptionsResume" action="{{model.application_url}}" method="{{model.method}}" enctype="multipart/form-data">
<fieldset>
<input type="file" data-ng-model='model.formData.resume' name="resume" data-ng-disabled="" data-valid-file data-my-validate data-value-required="true">
<submit data-ng-disabled="applyForm.$invalid || innerLoader" class="btn btn-primary" style="width:99%;" data-ng-click="submit(); model.submitFormApplicant()">
Apply
<!-- submitFormApplicant() check if a file is selected and if not does regular submit -->
</submit>
</fieldset>
</form>
I think that unbinding the event is required because of the closed over variables that are captured with the .on('click', ... anonymous function. I am pretty sure your code can be structured to not rely on the closure, thus removing the need to unbind from ng-click. However, without seeing your code, I cannot be sure that closures are your problem nor can I really recommend how restructure your code if they are.