Question

我的表单中有一个提交按钮，我试图禁用它，直到填满所有文本框。页面在浏览器中第一次刷新或加载后无法正常工作。如果我在同一页面中执行任何其他操作然后打开此添加细节弹出窗口它将被禁用。将非常感谢帮助。

成分</ P>

form: FormGroup;
 constructor(private fb: FormBuilder) {
    this.createForm();
}
createForm() {
    this.form = this.fb.group({
        name: ['', Validators.required],
        addrs: ['', Validators.required],
    });
}

HTML文件

<div id="details">
    <form [formGroup]="form" (ngSubmit)="addDetails()" name="form" novalidate>
        <div class="form-group">
            <label for="name">Name</label><input type="text"
                class="form-control" id="name" placeholder="Please Enter Name"
                formControlName="name" >
        </div>
        <div class="form-group">
            <label for="addrs">Address</label><input type="text"
                class="form-control" id="addrs"
                placeholder="Please Enter Address" formControlName="addrs" >

        <button type="submit" [disabled]="form.invalid || loading"
            class="btn btn-success">Submit</button>
        <br>
        <div *ngIf="loading" class="alert alert-success box-msg" role="alert">
            <strong>Added Successfully</strong>
        </div>
    </form>
</div>

Answer 1

为什么在表单标记中不使用验证？如果在表单中没有提到验证，那么表单将不会被验证。它将简单地执行接受您在form.try中输入的任何内容并在输入tag中执行没有novalidate ang ngmodel。它将起作用

Answer 2

试试这个：

<button type="submit" [disabled]="form.status === 'INVALID' || loading"
        class="btn btn-success">Submit</button>

这应该考虑两个选项，加载和无效表单。

禁用按钮不适用于angular4验证

2 个答案: