我之前从未使用过Angular或Angular2,但现在我必须对使用Angular2的域上运行的站点进行更新。我需要以编程方式填写文本框并单击“提交”,但在使用.value =“val”设置文本框的值后,它仍将文本框视为空。
我已经阅读了有关角度的内容,现在理解了ng-dirty和ng-pristine的概念,但是以编程方式将类更改为ng-dirty仍然无效。
似乎即使我更改了类,它仍然没有更新“原始”状态,它仍然认为文本框是空的。
我读过“markAsDirty()”并尝试使用它,但我得到“markAsDirty不是一个函数”。我只需要弄清楚如何更新页面,以便它意识到文本框不是空的,并让我提交表单。
非常感谢!
编辑: 页面形式:
<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>
我的问题是:
document.getElementById("username").value = "testuser";
document.getElementById("password").value = "testpass";
document.getElementsByClassName("btn btn-block btn-lg btn-info")[0].click();
最后给我一条消息,说明即使文本框中显示了值,也需要用户名和密码。只需单击文本框,键入一个字符,然后删除它就可以让我提交表单,但我需要在没有用户交互的情况下完成此操作。
答案 0 :(得分:1)
您正在使用本机javascript填充表单,而不是更新角度模型。在后备组件中,您需要使用ngmodel将元素连接到组件。然后更新组件中的变量,一切都会正确反映。
答案 1 :(得分:1)
好的,我可以看到您的代码存在一些问题,我将按照预期使其工作。
对于模板驱动的表单,在模板中创建并分配表单组变量(这将使我们之后附加控件的闪亮NgForm
与ngControl
),并绑定提交函数我们在这里的时候:
<form #myForm="ngForm" (ngSubmit)="submit(myForm.value)" id="form_register" novalidate="">
我们的每个输入都是独立的,但尚未与表单绑定,为此,我们要清除应由Angular 2管理的ng-
类,并添加我们的[(ngModel)]绑定到财产。
<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">
如果表单无效,我们将禁用我们的提交:
<button [disabled]="myForm.invalid" class="btn btn-block btn-lg btn-info" tabindex="4" type="submit">Log In</button>
我们的类有我们绑定的username
和password
属性,以及我们的提交函数:
export class App {
password: string;
username: string;
submit(value) {
console.log("submitting: " + JSON.stringify(value));
}
}
最后,如果我们真的想以编程方式标记事物,我们必须使用ViewChild
在代码中获取模板变量:
@ViewChild('myForm') formGroup;
password: string;
ngAfterContentInit() {
this.formGroup.control.markAsDirty();
}
要按照控件执行此操作,我们需要通过formGroup
变量访问它,或者在我们可以使用[(ngModel)]="username" #username="ngModel"
抓取的输入上添加单个模板变量。
这是一个可以玩的人,试图发展你的理解:http://plnkr.co/edit/ukJ1kq2UFBvtoCsxbyba?p=preview