I am expecting that the previous value on firstname is removed and then I can write the new value. But it is not removing the name.
Clear() function is not helping here.
var firstname= element(By.model('subject.firstName'));
firstname.clear().then(function() {
firstname.sendKeys('bob');
})
HTML:
<input type="text" ng-model="subject.firstName"
placeholder="First Name" name="firstName" validator="required"
valid-method="submit" message-id="requireFirstName"
ng-maxlength="50" class="ng-pristine ng-pending ng-empty
ng-valid-maxlength ng-touched">
Protractor version: 4.0.11
I generally add click() event before performing clear() or sendKeys(), just to make sure focus is on element. For example:
element(by.model('anyvalue')).click().clear().sendKeys(value);
Make sure you have an element with model anyvalue on your website.
Change
element(By.model...
to
element(by.model...
I believe that you don't have to use then() on clear, even though it returns a promise. So you can check if this will work:
firstname.clear();
firstname.sendKeys('bob');
Related
I am observing for my application clear().sendKey("abc") or click().clear().sendKey("abc") is not working. clear() does not clears the text present in <input...> field.
I tried this also :
WSManager.EditWSName.then(function(){
browser.actions().keyDown(protractor.Key.CONTROL).sendKeys('a').perform().then(function(){
browser.actions().sendKeys(protractor.Key.BACK_SPACE).perform().then(function(){
WSManager.EditWSName.sendKeys(Renamed);
browser.actions().sendKeys(protractor.Key.ENTER).perform();
});
});
});
In this case previous text gets cleared but sendKey() does not type "Renamed" text in <input ...> field.
Renamed field is not a string and not a variable either.
WSManager.EditWSName.sendKeys(Renamed);
Solution:
WSManager.EditWSName.sendKeys('Renamed');
.clear(); returns a promise that needs to be resolved.
Also, your code looks very confusing, or lacks context.
Anyway, this has always worked for me, when having to clear an input and then sendKeys afterwards:
element.clear()
.then(function(){
element.sendKeys('abc');
});
I have set code this way
errorGroup: any = FormGroup;
this.errorGroup = this.formBuilder.group({
errors: this.formBuilder.array([])
});
For repeat/add new data in group I have add this function which works fine.
addErrorGroup() {
return this.formBuilder.group({
error_code: ['',[Validators.required ]]
})
}
Get controls by this way. I think hear I'm missing something.
get f() { return this.errorGroup.controls.errors; }
In HTML
<select formControlName="error_code" name="error_code" (change)="errorCodeChange($event.target.value , i)">
<option *ngFor="..." value={{...}}>{{...}}</option>
</select>
<span *ngIf="f.error_code.errors.required" class="error-msg">This is required field.</span>
I got this error.
ERROR TypeError: Cannot read property 'errors' of undefined
If that error is coming from HTML, it's because your *ngIf condition is trying to read a value from an undefined object.
At the point where the view is rendered, and checked, it's entirely possible that f (incidentally, you should change that variable name to something more descriptive, but 🤷🏻♂️) doesn't have any errors populated yet, so will be undefined.
You can do one of two things here, either, you can wrap the whole thing in another *ngIf to ensure the error_code part of f is populate before accessing it:
<span *ngIf="f && f.error_code">
<span *ngIf="f.error_code.errors.required" class="error-msg">This is required field.</span>
</span>
Or, you can use the safe navigation operator:
<span *ngIf="f?.error_code?.errors?.required" class="error-msg">This is required field.</span>
Note the ? after each object key. This bails out when it hits the first null value, but, the app continues to work as it fails gracefully.
You can read more about it here: https://angular.io/guide/template-syntax#the-safe-navigation-operator----and-null-property-paths
How about if you just do below?
<span *ngIf="errorGroup.get('error_code').errors.required" class="error-msg">
This is required field.
</span>
so by doing this way, you don't need the f() getter in your component file.
I'm trying to get the value of an input element e.g. this is simple form:
<form id="loginForm">
<label for="username">Username</label>
<input required type="text" class="form-control" id="username">
<label for="password">Passowrd</label>
<input required type="password"id="password">
</div>
<button type="submit">Submit</button>
</form>
with jQuery I would have written:
let value = $("#password").val();
or I could even serialize the whole form,
but in Dart this seems not working:
querySelector('#username').getAttribute('value');
, it returns null
I'm not using any frameworks,
any suggestions?
querySelector will only return an HtmlElement. Since you know the result is an InputElement (a TextInputElement at that) you need to cast it to gain access to the value attribute.
(querySelector('#usernames') as InputElement).value
As of Dart version 2.2.0 (2019), the above answers no longer appear to work. Casting now returns this error:
Uncaught CastError: Instance of 'HtmlElement': type 'HtmlElement' is not a subtype of type 'InputElement'
Here's a way to access an input field's value without casting:
String value = document.getElementById('username').text;
If you type hint the element as an InputElement when you use querySelector you'll be able to access its value.
InputElement cityInput = querySelector('#city-input');
final cityName = cityInput.value;
As of Dart HTML package version 0.15.0, this is the only way that worked for me
String value= document.querySelector('#movie_id').attributes['value'];
querySelector('xxx').attributes returns a map containing the string of value
I'am trying to have auto complete and onBlur functionality attached to the same input field using Liftweb framework.
I have them working independently.
What I'am trying to do is have an auto complete input field and on selecting the value from the suggestion, some business logic is to be performed and another input field needs to be updated.
But only the auto complete feature is working.
This is the form
<form class="lift:CapitalOnBlur">
Country : <input id="countryNameOnBlur" type="text" name="countryNameOnBlur"/><br />
Capital: <input id="capitalNameOnBlur" type="text" name="capital"/>
</form>
This is the snippet
object CapitalOnBlur {
val capitals: Map[String, String] = Map(
"india" -> "New Delhi",
"uganda" -> "Kampala",
"japan" -> "Tokyo")
def render = {
def callback(countryName: String): JsCmd = {
val capital = capitals.getOrElse(countryName.toLowerCase, "Not Found")
SetValById("capitalNameOnBlur", capital)
}
val default = ""
def suggest(value: String, limit: Int) = capitals.filter(_._1.startsWith(value.toLowerCase)).keys.toSeq
def submit(value: String) = Unit
"#countryNameOnBlur" #> AutoComplete(default, suggest, submit) &
"#countryNameOnBlur [onBlur]" #> SHtml.onEvent(callback)
}
}
This is what I actually want to do. I tried this and only onBlur event is triggered.
According to my needs, When I start typing the country name in the first input field, it should show me the suggestions and on selecting the suggestion i.e.; onBlur from that input field, the corresponding capital should be rendered in the next input field.
And also is there a way to trigger an action on selecting a suggestion using the inbuilt Auto complete feature of lift.
I am adding this as a separate answer since the edit is essentially a separate question. The AutoComplete widget from Lift does not modify an existing element on the page, but rather replaces it with the following NodeSeq, as per the source.
<span>
<head>
<link rel="stylesheet" href={"/" + LiftRules.resourceServerPath +"/autocomplete/jquery.autocomplete.css"} type="text/css" />
<script type="text/javascript" src={"/" + LiftRules.resourceServerPath +"/autocomplete/jquery.autocomplete.js"} />
{Script(onLoad)}
</head>
<input type="text" id={id} value={default.openOr("")} />
<input type="hidden" name={hidden} id={hidden} value={defaultNonce.openOr("")} />
</span>
Since that has now replaced the original HTML, the second line where you add an onBlur handler is not applied to anything useful. However, the AutoComplete constructor does take an optional parameter for attributes and you can probably use that to add an onBlur attribute to the input tag.
You can try something like this:
"#countryNameOnBlur" #> AutoComplete(default, suggest, submit,
("onBlur", SHtml.onEvent(callback).cmd.toJsCmd))
The above should pass in a tuple which specifies the attribute name, and the string representation of the Javascript you want executed. This should accomplish what you are looking for as long as the AutoComplete library doesn't also rely on the onBlur event. That case is doable too, but a bit more work.
One other thing to note is that onBlur is fired when the input loses focus, ie: the user moves the cursor to another field. If you want it to fire any time the text changes, regardless of cursor position, you may prefer the onChange event.
If you are looking to bind to different events on the same element, so that you end up with something like: <input onblur="getCapitalName" onchange="autoComplete">, you can try using SHtml.onEvent. Something like this in your snippet should do the trick:
object CapitalOnBlur {
def render =
"* [onblur]" #> SHtml.onEvent(e => CapitalOnBlur.getCapitalName(e)) &
"* [onchange]" #> SHtml.onEvent(e => CapitalOnBlur.autoComplete(e)) &
...
}
And then call the snippet from your input, like this:
<form>
Country : <input id="countryNameOnBlur" data-lift="CapitalOnBlur" type="text" name="countryNameOnBlur"/><br />
</form>
I am not sure what any of the arguments your code takes, so the above is mostly illustrative - but will hopefully get you on your way.
I'm trying to do this simple thing
<%= Html.HiddenFor(model => model.Id)%>
the model is
[HiddenInput(DisplayValue=true)]
public int Id { get; set; }
but i always get this rendered
<input type="hidden" value="0" name="UserInfo.Id" id="UserInfo_Id">
i've check and the id is NOT 0.. ?!
need some explanation here...
Edit
The problem seem's to be the post thing mentionned below.
This is working
<input type="hidden" value="<%= Html.AttributeEncode(Model.Id) %>" id="<%= Html.IdFor(model=>model.Id)%>" name="<%= Html.NameFor(model=>model.Id)%>" />
Thanks to Manaf
I'm not sure if this is the case with you but the Html.HiddenFor() "do not output correct values after a post if the value is changed during the post." and this is a not a bug it was designed that way.
Quick Fix :
Don't use the helper, try this instead :
<input type="hidden" value="<%= Html.AttributeEncode(model.Id) %>" id="Id" name="Id" />
Always worked for me :)
To add to Manaf's correct answer--you note correctly that the problem occurs in controller actions that handle posts. I was getting the same problem in a controller action that handles a get when I explicitly pass a model to a view:
[HttpGet]
ActionResult SearchForSomething(SearchForm searchForm)
{
searchForm.MyId = SomeValueFromSession;
return View("SearchForSomething", searchForm);
}
In the view, this line that rendered a hidden input for MyId always rendered "0":
#Html.HiddenFor(m => m.MyId);
Per Darren Oster's suggestion I changed to the following and fixed the problem:
[HttpGet]
ActionResult SearchForSomething(SearchForm searchForm)
{
searchForm.MyId = SomeValueFromSession;
ModelState.Clear();
return View("SearchForSomething", searchForm);
}
My comment is relegated to the last place (even I couldn't find it), so:
In case you don't want to clear the modelstate, as Darren Oster suggested, removing the problematic key worked for me: ModelState.Remove("HiddenKey")
I ran into this problem as well with #Html.HiddenFor.
#Html.Hidden("Id", Model.Id) also gave value 0, but a foreign key field, e.g., #Html.Hidden("Model_Category_ModelId", Model.Category.ModelId) did work, while it #Html.HiddenFor(m => m.Category.ModelId) did not.
My solution was to redirect to the get action, as described in ASP NET MVC Post Redirect Get Pattern.