Angular，使用 [disabled] 禁用提交按钮来检查表单有效性答案

【问题标题】：Angular, Disable submit button using [disabled] to check form validityAngular，使用 [disabled] 禁用提交按钮来检查表单有效性
【发布时间】：2018-07-10 00:51:06
【问题描述】：

我正在尝试使用[disable]=form.controls[...].invalid 条件检查来禁用提交按钮。如果输入字段为空或invalid，则应禁用提交按钮。但看起来我做错了。当我填写一些字段并将一些字段留空时，该按钮被禁用，除了第一个输入字段。当我填写第一个输入字段时，按钮变为启用状态（而其他输入字段仍为空或invalid）。

//component.ts
form01: FormGroup;
public myDatePickerOptions: IMyDpOptions = {
  dateFormat: 'dd-mmm-yyyy',
};

setDate(): void {
  let date = new Date();
  this.form01.patchValue({
    DoB: {
      date: {
        year: date.getFullYear(),
        month: date.getMonth() + 1,
        day: date.getDate()
      }
    }
  });
}

clearDate(): void {
  this.form01.patchValue({
    DoB: null
  });
}

constructor(public builder: FormBuilder) {
  this.form01 = this.builder.group({
    email: [null, Validators.required], //text
    DoB: [null, Validators.required], //radio button
    gender: [null, Validators.required], //date picker
  });
}

results: object = new Object();
functionForm01() {
  this.results = [{
    {
      "email": this.form01.controls.email.value
    },
    {
      "DoB": this.form01.controls.DoB.value
    },
    {
      "gender": this.form01.controls.gender.value
    }
  }]
  console.log(this.result);

  this.form01.reset();
}

<!--component.html-->
<div>
  <form [formGroup]="form01">
    email:<input type="text" name="email" formControlName="email" required/> gender:
    <input type="radio" name="gender" formControlName="gender" value="male"> male<br>
    <input type="radio" name="gender" formControlName="gender" value="female"> female<br> DoB:
    <my-date-picker name="DoB" [options]="myDatePickerOptions" formControlName="DoB" required></my-date-picker>

    <button type="submit" [disabled]="form01.controls['email' || 'DoB' || 'gender'].invalid" (click)="functionForm01()">Click</button>
  </form>
</div>

我正在使用来自 this link 的 Angular 打字稿和 myDatePicker 包。谁能帮帮我？

【问题讨论】：

标签： html angular typescript form-control

【解决方案1】：

您可以通过检查表单的有效性来启用/禁用按钮：

<button type="submit" [disabled]="!disableBtn">Click</button>

在你的组件内部：

let disableBtn = false;
this. form01.valueChanges 
            .subscribe((changedObj: any) => {
                 this.disableBtn = this. form01.valid;
            });

或通过 HTML：

<button type="submit" [disabled]="!form01.valid" (click)="functionForm01()">Click</button>

【讨论】：

属性 valid 不存在于类型 ()=> void
FormGroup 有那个属性？？我使用有效和脏检查来显示保存栏并启用/禁用保存/取消按钮。你能提供一个 plunkr 或stackblitz.com 吗？

【解决方案2】：

由于您有 formGroup 对象，如果 form01 无效，您可以禁用按钮

<!--component.html-->
    <div>
      <form [formGroup]="form01">
        email:<input type="text" name="email" formControlName="email" required/> gender:
        <input type="radio" name="gender" formControlName="gender" value="male"> male<br>
        <input type="radio" name="gender" formControlName="gender" value="female"> female<br> DoB:
        <my-date-picker name="DoB" [options]="myDatePickerOptions" formControlName="DoB" required></my-date-picker>

    <button type="submit" [disabled]="!form01.valid" (click)="functionForm01()">Click</button>

      </form>
    </div>

【讨论】：

这样我们就不用一一检查了吧？
不，为什么要一一检查？ FormGroup 会为你一一检查 :)
moohkooh 是对的，form01 包含了所有的控件，如果 form01 的任何一个控件无效，则 form01 无效。

【解决方案3】：

您需要在imports import { FormsModule, ReactiveFormsModule } from '@angular/forms'下的app.module.ts 中导入FormsModule;

@NgModule({
imports: [
     FormsModule      
])}

【讨论】：