Question

请告诉我表单有效时如何禁用和启用按钮

我的表格没有什么条件。

卡片上的姓名：仅包含英文字母的字符串。

卡号：由16个数字组成的字符串。

有效期月份：2位整数，表示卡的有效期   一个月。

有效期限：2位整数，表示卡的有效期限   年。

CVV / CVC Number：一个由3个数字组成的字符串。

我试图在此处使用反应形式添加此内容，但无法设置所有条件并禁用button。

 constructor(private fb: FormBuilder) {
    this.paymentForm = this.fb.group({
      cardname: ['', [Validators.required ,Validators.pattern('^[A-Za-z ]+$')]],
      cardnumber: ['', [Validators.required,Validators.pattern('/^\d{16}$/')]],
      dateofexipire:['', [Validators.required]],
       dateofexipireyear:['', [Validators.required]],
       cvc:['', [Validators.required]]
    });
  }

这是我的代码 https://stackblitz.com/edit/angular-cttwtq?file=src%2Fapp%2Fapp.component.ts

Answer 1

在您的html提交按钮上，您需要做的就是检查表单的值，如下所示：

<button [disabled]="!paymentForm.valid">Submit</button>

更新：要验证CVC，最简单的解决方案是将输入类型更改为数字`type =“ number”，这将利用内置的浏览器验证将其限制为仅数字，然后使用Angulars maxLength() Validator将字段限制为3个字符

<input class="form-control" type="number" placeholder="123"formControlName="cvc">

查看更新后的StackBlitz

Answer 2

第一件事：您的formControlName出现了一些问题，卡名没有formControlName，并且日期拼写错误。

由于此问题，请使用[disabled]="condition"语法来禁用按钮。

另外，请查看forms documentation，以获取有关表格和用户输入的信息。

表单有效时如何启用按钮

2 个答案: