Question

我正在使用反应形式。

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

var binding = new NetHttpBinding();

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

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

这是我的验证规则：

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

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

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]+$')])]
});

如果我没有触及我可以提交的表单，那么<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即使我没有使用_searchForm.valid也不会返回true领域。

我已经验证了每个输入＆＃34;都带有自己的值＆＃34;，删除了Validators.required行，然后只是将我的提交函数中的值转储出来：

[disabled="!_searchForm.valid"

我做错了什么？为什么console.log('Name: ' + this._searchForm.value.name); console.log('Phone: ' + this._searchForm.value.phone); console.log('Cellphone: ' + this._searchForm.value.cellphone);需要表单中的所有字段？

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完成表单构建和验证的方式意味着您必须手动清除并添加验证，即使在已禁用的项目上也是如此（可能有计划对此进行更改，因为这对于角度github来说并非罕见的投诉）。这是一种面向代码和驱动的表单方式，需要暂时对其进行处理。

如果输入是否需要输入，如果它们具有未满足的最小长度则没有实际意义。最近包含在Angular 2.0.2 https://github.com/angular/angular/pull/11450

中的参考https://github.com/angular/angular/blob/master/CHANGELOG.md

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

Answer 2

事实证明这是input type="number"的问题。包含电话和手机值的字段只应包含数字，因此除Validators.pattern('^[0-9-]+$')验证外，我还为它们提供了输入类型的数字。

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

Answer 3

我对Angular反应形式也有同样的问题。我基于某种逻辑禁用并启用了表单控件。事实证明，我正在禁用但未启用表单控件，因此我得到了一个form.valid为false的信息。显然，在Angular的反应式表单中，具有禁用字段的表单无效，并且docs没有提及此默认行为。

Angular 2：Form valid返回false，直到填充所有字段

3 个答案: