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
Related
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 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');
This is my view file containing the form that has to filled in by the user:
#helper.form(call) {
#helper.input(resumeForm("surname"), '_label -> "Surname") { (id, name, value, args) =>
<input name="#name" type="text" value="#value" placeholder="Enter your surname">
}
}
This is my custom field constructor:
#(elements: helper.FieldElements)
#if(!elements.args.isDefinedAt('showLabel) || elements.args('showLabel) == true) {
<div class="input-with-label text-left">
<span>#elements.label</span>
#elements.input
</div>
} else {
#elements.input
}
Now I have a dilemma. When the entered value doesn't clear validation, I need to add the class field-error to the input and I need to add data-toggle, data-placement and title. However, I don't know of any way to check if there are errors for the specific field. What is the best way to implement this? I already looked at using inputText or something but that is basically the same as the base input thus also does not have access to any errors. I'm also unable to alter the HTML of the elements.input inside the field constructor.
Have a look at play documentation: Writing your own field constructor.
You can check on errors with #if(elements.hasErrors) within the template of your custom field constructor.
<div class="input-with-label text-left #if(elements.hasErrors){field-error}">
...
Edit:
You can pass the error state of your field via the args parameter to your input. From the play docs:
Note: All extra parameters will be added to the generated HTML, except for ones whose name starts with the _ character. Arguments starting with an underscore are reserved for field constructor argument (which we will see later).
You need to cast to the matching type though.
#input(resumeForm("surname"), '_label -> "Surname", 'hasErrors -> resumeForm("surname").hasErrors) { (id, name, value, args) =>
<input name="#name" type="text" value="#value" placeholder="Enter your surname"
class="#if(args.get('hasErrors).map(_ match { case x:Boolean => x}).get){field-error}">
}
i am new at scala and play 2.1 and from php background ,in the below code the session userId and userId values are equal but else condition is executing, i dont understand why its happening.
#session.get("userId") //21 on webpage
#println(session.get("userId")) //some(21) on console
#userId //21 on webpage
#println(userId) //21 on console
#println(session.get("userId").get) //21 on console
#if((session.get("userId").get)==userId){
<input type="file" value="image" style="position:absolute;opacity:0.0;" name="image" style="70px;" onchange="javascript:this.form.submit();">
}else{
<input type='button' value='Add' />
}
thanks in advance
It's a case of type mismatch. The values stored in session are of string type by default. And I think the values userId is of Int or long type. So convert your session value to same type, you are comparing with i.e. use session.get("userId").get.toInt to change in integer type and then compare it.
I have a hidden input field in HTML, it contains SomeValue:
<input id="event_id" type="hidden"> SomeValue </input>
I need SomeValue in server-side.
Is there a SHtml method I can use? The following code should get the value on submit, I need the value once the page is loaded.
"event_id" #> SHtml.onSubmit(id = _)
In the template you can just write
<input id="event_id"></input>
And in the snippet you can use the SHtml.hidden method:
SHtml.hidden(() => println("hidden field"))