Setting element value does not affect ng-model directive for variable in Angular #308
Description
When I modify the "value" attribute of an element which has the [(ngModel)] directive, the value is not passed on to the input field in Angular. How can I use HtmlUnit to modify the value of an Angular typescript element?
login.component.html
<tr>
<td><input aria-required="true" #input (focus)="authenticateRet=0" (keyup.enter)="login()" maxlength="10" style="width: 195px" name="loginUsername" id="**loginUsername**" type="text" [(**ngModel**)]="**user.name**" [disabled]="logging||isLoading">
</td>
</tr>
<tr>
<td><label for="password" dir="ltr">{{mriText.s('password')}}:</label></td>
</tr>
<tr>
<td><input aria-required="true" (focus)="authenticateRet=0" (keyup.enter)="login()" style="width: 195px" name="password" id="**password**" value="" autocomplete="off" type="password" [(**ngModel**)]="**user.password**" [disabled]="logging||isLoading"></td>
</tr>
login.component.ts
import { Component, OnInit, AfterViewInit, ViewChildren } from '@angular/core';
import { User } from './user';
import { FormBuilder, FormGroup } from '@angular/forms';
import { Router } from '@angular/router';
import { AuthenticationService } from '../util/authentication.service';
import { MriText } from '../mri/mri-text';
import { SessionManager } from '../util/session-manager';
@Component({
selector: 'nav-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements AfterViewInit, OnInit {
@ViewChildren('input') vc;
logging: boolean = false;
mriText: MriText = new MriText(['Mainframe']);
user: User = new User();
...
constructor(private fb: FormBuilder,
private router: Router, private service: AuthenticationService) { }
ngOnInit() {
this.form = this.fb.group({
username: [{ value: '', disabled: false }],
password: [{ value: '', disabled: false }]
});
login() {
this.service.login(this.user.name, this.user.password).subscribe(ret => {
this.logging = false;
this.process(ret);
});
login service authentication.service.ts:
login(name, password): Observable<number> {
let paramMap = new HashMap;
return super.invokeService("login",paramMap, { "name": name, "password": password });
}
Using HtmlUnit in my java source to change the element value attribute and click the login:
URL thisUrl = new URL("http://localhost:9080/Navigator/");
Page thisPage = webClient.getPage(thisUrl);
WebResponse response = thisPage.getWebResponse();
HtmlPage htmlPage = (HtmlPage) thisPage;
DomElement enterButton = htmlPage.getElementById("loginbutton");
DomElement usernameField = htmlPage.getElementById("loginUsername");
DomElement nameField = htmlPage.getElementById("name");
DomElement passwordField = htmlPage.getElementById("password");
usernameField.setAttribute("value", m_userProfile);
passwordField.setAttribute("value", m_userPW);
Page loggedInPage = enterButton.click();
webClient.waitForBackgroundJavaScript(1000);
When the service is invoked, the values for the elements are not set (for "name" and "password"):
return super.invokeService("login",paramMap, { "name": name, "password": password });