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

Question

我以前从未使用过 Angular 或 Angular2，但现在我必须对在我的域上运行的使用 Angular2 的站点进行更新。我需要以编程方式填写文本框并单击提交，但在使用 .value = "val"设置文本框的值后，它仍然将文本框视为空的。

我已经阅读了 Angular，现在理解了 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

您正在使用 native javascript 填写表单，并且没有更新 Angular 模型。在您的支持组件中，您需要使用 ngmodel 将您的元素连接到组件。然后更新组件中的变量，一切都会正确反射(reflect)。