Angular 2：在填充所有字段之前，表单有效返回 false

Question

我正在使用反应形式。

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

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

可以使用 bool 打开/关闭我的字段：

showName: boolean = true;
showPhone: boolean = true;
showCellphone: boolean = true;

这是我的验证规则：

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>

如果我不触摸我可以提交的表格，那么pristine似乎正在起作用。

问题是，我无法在单个字段中输入文本并提交。 如果我在一个字段中输入文本，我必须在所有字段中输入文本才能提交，否则即使我没有在所有字段上使用Validators.required ， _searchForm.valid也不会返回 true。

我已经通过删除[disabled="!_searchForm.valid"行来验证每个输入“传送自己的值”，然后像这样在我的提交函数[disabled="!_searchForm.valid"储值：

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

我做错了什么？ 为什么.valid要求表单中的所有字段？

Answer 1

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

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();
}

调用<input id="toggleName" type="checkbox" class="onoffswitch-checkbox" (click)='enableDisableInput("name")' [checked]="showName">

使用 Reactive Forms 完成表单构建和验证的方式意味着您必须手动清除和添加即使在禁用项目上的验证（可能有计划改变这一点，因为这在 angular github 上并不少见）。 这是一种面向代码和驱动的表单方式，暂时需要这样对待。

如果输入具有未满足的最小长度，则是否需要输入是没有意义的。 参考https://github.com/angular/angular/pull/11450 ，最近包含在 Angular 2.0.2 https://github.com/angular/angular/blob/master/CHANGELOG.md

对于驱动的表单，看起来它们在 2.1.0 中有一个更正，其中这些字段是可选的，带有模式和最小长度，但我不知道这是否也在响应式表单中。

Answer 2

事实证明，这是input type="number" 。 包含电话和手机值的字段应该只包含数字，所以除了Validators.pattern('^[0-9-]+$')验证我还给了他们输入类型的数字。

一旦将其更改为文本，一切都按预期进行。

Answer 3

我对 Angular 反应形式有同样的问题。 我根据某些逻辑禁用和启用我的表单控件。 结果是我禁用了表单控件，但没有启用表单控件，所以我得到的 form.valid 为 false。 显然，在 Angular 的响应式表单中，带有禁用字段的表单是无效的，并且 文档没有提到这种默认行为。