Develop Reference

Jquery clear textbox is not working?

I am using this function to clear my text box
$('#txtcountry').val("");
but it is not working there is no error in console also.
here is my textbox control:
<input class="form-control"
id="txtcountry"
placeholder="Choose your Country"
type="text"
onkeypress="return isAlphaNumeric(event);"
data-bind="value:ComonCountrySearchText, valueUpdate:'afterkeydown'"
required>

I have used the below code and its working find.
$("#txtcountry").val("");

try using this
$('#txtcountry').attr("value", "");

Setting form and inputs to "ng-dirty" programatically

I've never worked with Angular or Angular2 before, but now I have to make an update to a site running on my domain that is using Angular2. I need to programatically fill out a textbox and click submit, but after setting the textbox's value using .value = "val", it still treats the textbox as if it is empty.
I've read up on angular and now understand the concept of ng-dirty and ng-pristine, but programatically changing the class to ng-dirty still doesn't work.
It seems like even if I change the classes, it is still not updating the "pristine" status and it still considers the textbox empty.
I've read about "markAsDirty()" and tried using it but I get "markAsDirty is not a function". I just need to figure out how to update the page so that it realizes that the textbox is not empty and lets me submit the form.
Thanks a lot!
Edit:
Page form:
<form id="form_register" novalidate="">
<div class="form-steps">
<div class="form-group">
<div class="input-group">
<input autocomplete="off" class="form-control ng-pristine ng-invalid ng-touched" data-is-regex="true" data-mask="[a-zA-Z0-1\.]+" id="username" name="username" ngcontrol="username" placeholder="Username" required="" style="color: black !important;" tabindex="13" type="text">
</div>
</div>
<div class="form-group">
<div class="input-group">
<input autocomplete="off" class="form-control ng-untouched ng-pristine ng-invalid" id="password" name="password" ngcontrol="password" placeholder="Password" required="" style="color: black !important;" tabindex="14" type="password">
</div>
</div>
<div class="form-group">
<button class="btn btn-block btn-lg btn-info" tabindex="4" type="submit">
Log In
</button>
</div>
</div>
</form>
My problem is that this:
document.getElementById("username").value = "testuser";
document.getElementById("password").value = "testpass";
document.getElementsByClassName("btn btn-block btn-lg btn-info")[0].click();
ends up giving me a message saying the username and password are required even though there is a value showing in the textbox. Simply clicking on the textbox, typing a character, then deleting it will allow me to submit the form, but I need to accomplish this without user interaction.

You are filling the forms with native javascript and that is not updating the angular model. In your backing component you need to use ngmodel to connect your elements to the component. Then update the variables in the component and everything will reflect correctly.

Okay, there are a few issues with your code that I can see and I'll walk through getting this to work as expected.
For a Template driven form, create and assign the form group variable (which will make our shiny NgForm which we later attach controls to with ngControl) in the template, and lets bind the submit function while we're at it:
<form #myForm="ngForm" (ngSubmit)="submit(myForm.value)" id="form_register" novalidate="">
Each of our inputs is standalone and not yet tied to the form, to do so we'll want to clear the ng- classes which should be managed by Angular 2 and add our [(ngModel)] binding to a property.
<input autocomplete="off" class="form-control" data-is-regex="true" data-mask="[a-zA-Z0-1\.]+"
id="username" name="username" placeholder="Username" ngControl="username" [(ngModel)]="username"
required style="color: black !important;" tabindex="13" type="text">
We're going to disable our submit if the form is invalid:
<button [disabled]="myForm.invalid" class="btn btn-block btn-lg btn-info" tabindex="4" type="submit">Log In</button>
Our class has the username and password properties that we bind to, and our submit function:
export class App {
password: string;
username: string;
submit(value) {
console.log("submitting: " + JSON.stringify(value));
}
}
Finally, if we really want to mark things dirty programmatically this way we will have to grab our template variable in our code with a ViewChild:
#ViewChild('myForm') formGroup;
password: string;
ngAfterContentInit() {
this.formGroup.control.markAsDirty();
}
To do it per control we either need to access it through our formGroup variable or add individual template variables on the inputs we can grab with [(ngModel)]="username" #username="ngModel", for instance.
here's a plunker you can play with to try and develop your understanding: http://plnkr.co/edit/ukJ1kq2UFBvtoCsxbyba?p=preview

Does a ng-model work on ng-repeated fields?

I am using ng-repeat and I am various levels in such as:
`ul in output.content.innercontent` or `li in ul.content.innercontent`
my input looks like this:
<input id="{{input.key}}" name="{{input.label}}" type="text"
value="{{input.value}}" placeholder="{{input.defaultValue}}"
value="{{input.label}}"
class="form-control input-md" uib-tooltip="{{input.tooltip}}"
ng-if="input.type == 'input'">
On any one of those whenever a change happens and then an onBlur I want to make a call. Is this possible with ng-model & ng-model-options="{updateOn:'blur'}" with all these fields? The bind behavior I see online are mostly of an input to read-only field somewhere. Should I use ng-blur followed with a on("change") type of behavior?

try with
<input id="{{input.key}}" name="{{input.label}}" type="text"
ng-model="{{input.value}}" <!-- this -->
placeholder="{{input.defaultValue}}"
class="form-control input-md" uib-tooltip="{{input.tooltip}}"
ng-if="input.type == 'input'">
ng-model should do it
<input ng-model-options"{updateOn: 'blur'}"/>
==> This update the model only when user get outside the input
To call a function on-blur :
<input ng-blur="callThisFn()"/>

Placeholder is not working with ng-model

HTML
With ng-model - Not working
<input type="text" ng-model="Event.Sponsor.Amount" name="donationAmount" placeholder="{{PlaceHolderOther}}" required />
Without ng-model - Working
<input type="text" name="donationAmount" placeholder="{{PlaceHolderOther}}" required />
JS
$scope.PlaceHolderOther = "$50.00";
Could you tell me why placeholder is not working with ng-model ? It's working fine without ng-model.Thanks in advance.
Out put (When it runs)
<input type="text" name="donationAmount" placeholder="$50.00" ng-model="Event.Sponsor.Amount" required="" class="ng-pristine ng-valid ng-valid-required">
It shows the placeholder value properly.But not display it to the user.Why ?
UPDATE : I have found out the issue.That is texbox has been initialized automatically.When we remove that value then it shows the placeholder value.So how to avoid this by default ?

Try data-ng-model, refer to http://jsfiddle.net/pranav93/ww3k4hxp/6/ .
Something like,
<input id="ship-address-line-3" name="ship_address_line3" placeholder="{{shippingFormOrderItemAction.ship_address_line3}}" data-ng-model="retryAutoDetails.ship_address_line3" type="text">

Did you defined
$scope.Event = {};
Try above with.
Yes: updated answer according.. (typo mistake corrected)

AngularJS dynamic form value not picked up by angular on submit

I have a few form inputs on a page with angular model(s) attached but one of their values is set dynamically via a jquery call after some image upload has been performed.
<input class="form-control ng-dirty ng-valid ng-valid-required" id="name" ng-model="item.name" required="required" name="name" type="text" value="">
<input class="form-control ng-dirty ng-valid ng-valid-required" id="url" ng-model="item.url" required="required" name="url" type="text" value="">
<input class="form-control" id="imgname" ng-model="item.imgname" required="required" name="imgname" type="text" value="">
The later input field is added via jquery.
<input class="form-control" id="imgname" ng-model="item.imgname" required="required" name="imgname" type="text" value="">
The issue is then when i submit the form only the item.name and item.url are sent through and not the item.imgname.
my submit code:
$scope.submitForm = function(store){
....
$log.debug(store);
};
I am adding the code to the form via:
...
complete : function(imgname){
JQ('#imgname').val(imgname);
},...
How can i add the data and have the form pick it up on submit?

You can't set ng-model value via Jquery. Rather, you have to fill that scope named "item.imgname" somewhere in your controller like $scope.item.imgname="Hello"
and on Submit button you can get this whole model(item)... you'll have that value in item.imgname model for sure.

Well in fact after a few more goes at it and just checking my code, I first had to correct the input type as i was setting it to a URL not a text type thus it was always causing issues etc.
Anyway once that was sorted i then placed
$scope.item = {};
Within my controller.
Then replaced the
JQ('#imgname').val(imgname);
for the $scope value
complete : function(imgname){
$scope.item.img = imgname;
}....
Then once the image was uploaded and then the form field populated as above inc. the other form details it the img field was submitted with the form.