Forms Angular 2:Form valid在填充所有字段之前返回false

我使用的是反应形式

我有一个提交按钮，在表单有效之前应禁用该按钮：

<button type="submit" [disabled]="!_searchForm.valid && !_searchForm.pristine">Submit</button>

这是我的验证规则：

this._searchForm = this._formBuilder.group({
    name: [{value: '', disabled: !this.showName}, Validators.compose([Validators.minLength(3), Validators.maxLength(50), Validators.pattern('^[a-zA-Z]+$')])],
    phone: [{value: '', disabled: !this.showPhone}, Validators.compose([Validators.minLength(3), Validators.maxLength(50), Validators.pattern('^[0-9-]+$')])],
    cellphone: [{value: '', disabled: !this.showCellphone}, Validators.compose([Validators.minLength(3), Validators.maxLength(50), Validators.pattern('^[0-9]+$')])]
});

最后，这是每个字段在HTML中的显示方式：

<div class="form-group" [ngClass]="{'has-danger': _searchForm.controls.name.errors && !_searchForm.controls.name.pristine}">

<label for="name">Name:</label>

<div class="input-group">

    <span class="input-group-addon">
        <div class="onofwrapper">
            <div class="onoffswitch">
                <input id="toggleName" type="checkbox" class="onoffswitch-checkbox" (click)='toggleName()' [checked]="showName">
                <label class="onoffswitch-label" for="toggleName"></label>
            </div>
        </div>
    </span>

    <input type="text" formControlName="name" class="form-control" [ngClass]="{'form-control-danger': _searchForm.controls.name.errors && !_searchForm.controls.name.pristine}" autocomplete="off" spellcheck="false">

</div>

<div *ngIf="_searchForm.controls.name.errors && !_searchForm.controls.name.pristine" class="form-control-feedback">Error message</div>

我做错了什么？

---

为什么

.valid

需要表单中的所有字段？

如果禁用或启用输入，则需要一个函数：

enableDisableInput(inputName: string): void {
    if(!this._searchForm.controls[inputName].disabled) {
        this._searchForm.controls[inputName].clearValidators();
        this._searchForm.controls[inputName].disable();
    } else {
    this._searchForm.controls[inputName].setValidators(Validators.compose([Validators.minLength(3), Validators.maxLength(50), Validators.pattern('^[0-9]+$')])]);
    }
    this._searchForm.controls[inputName].updateValueAndValidity();
}

调用的

使用反应式表单进行表单构建和验证的方式意味着您必须手动清除和添加验证，即使是禁用的项（可能有计划对此进行更改，因为这在github上并不少见）。这是一种面向代码和受驱动的表单方式，目前需要这样对待

如果输入具有未满足的最小长度，则是否需要输入是没有意义的。最近包含在Angular 2.0.2中的参考

---

对于表单驱动，看起来在2.1.0中有一个修正，其中那些字段对于pattern和minlength是可选的，但我不知道这是否也存在于被动表单中。

事实证明这是

input type=“number”

的问题。包含phone和mobile值的字段应该只包含数字，因此除了

Validators.pattern（“^[0-9-]+$”）

validation之外，我还为它们提供了数字的输入类型

---

一旦变成文本，一切都像预期的那样进行

我对角度反应形式也有同样的问题。我基于某种逻辑禁用和启用了表单控件。结果是我禁用了表单控件，但没有启用表单控件，所以我得到了一个form.valid作为false。显然，在Angular的被动表单中，带有禁用字段的表单是无效的，用户没有提及此默认行为

console.log('Name: ' + this._searchForm.value.name);
console.log('Phone: ' + this._searchForm.value.phone);
console.log('Cellphone: ' + this._searchForm.value.cellphone);

enableDisableInput(inputName: string): void {
    if(!this._searchForm.controls[inputName].disabled) {
        this._searchForm.controls[inputName].clearValidators();
        this._searchForm.controls[inputName].disable();
    } else {
    this._searchForm.controls[inputName].setValidators(Validators.compose([Validators.minLength(3), Validators.maxLength(50), Validators.pattern('^[0-9]+$')])]);
    }
    this._searchForm.controls[inputName].updateValueAndValidity();
}