Question

我之前从未使用过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();

最后给我一条消息，说明即使文本框中显示了值，也需要用户名和密码。只需单击文本框，键入一个字符，然后删除它就可以让我提交表单，但我需要在没有用户交互的情况下完成此操作。

Answer 1

您正在使用本机javascript填充表单，而不是更新角度模型。在后备组件中，您需要使用ngmodel将元素连接到组件。然后更新组件中的变量，一切都会正确反映。

Answer 2

好的，我可以看到您的代码存在一些问题，我将按照预期使其工作。

对于模板驱动的表单，在模板中创建并分配表单组变量（这将使我们之后附加控件的闪亮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

以编程方式将表单和输入设置为“ng-dirty”

2 个答案: