将表单和输入设置为“ng-dirty”;编程上

Setting form and inputs to "ng-dirty" programatically

本文关键字：ng-dirty 编程 表单 输入 设置      更新时间：2023-09-26

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

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

你正在用原生javascript填充表单，这并没有更新angular模型。在你的后台组件中，你需要使用ngmodel来连接你的元素和组件。然后更新组件中的变量，一切都会正确反映。

好吧，我可以看到你的代码有一些问题，我将通过它来实现预期的工作。

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

相关文章：