反应式表单检查表单字段为空或默认并禁用按钮 Angular

Question

我想在初始表单为空时禁用提交按钮，如果任何值不为空，我需要启用提交按钮可能吗？

<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
            <div class="form-row">
                <div class="form-group col">
                    <label>Title</label>
                    <select formControlName="title" class="form-control" >
                        <option value="Mr">Mr</option>
                        <option value="Mrs">Mrs</option>
                    </select>
                </div>
                <div class="form-group col-5">
                    <label>First Name</label>
                    <input type="text" formControlName="firstName" class="form-control"  />
                </div>
                <div class="form-group col-5">
                    <label>Last Name</label>
                    <input type="text" formControlName="lastName" class="form-control"  />
                </div>
            </div>
            <div class="form-row">
                <div class="form-group col">
                    <label>Date of Birth</label>
                    <input type="date" formControlName="dob" class="form-control" />
                </div>
                <div class="form-group col">
                    <label>Email</label>
                    <input type="text" formControlName="email" class="form-control"  />
                </div>
            </div>
     
            <div class="text-center">
                <button class="btn btn-primary mr-1">Register</button>
            </div>
        </form>

形成ts文件

ngOnInit() {
        this.registerForm = this.formBuilder.group({
            title: [''],
            firstName: [''],
            lastName: [''],
            dob: [''],
        });
    }

Answer 1

在 .ts 文件中

//Add property
public isButtonDisabled: boolean;
public formValueChangeSubscription :Subscription;

// Add in ngOnInit
    this.formValueChangeSubscription = this.registerForm.valueChanges.subscribe(() => {
  this.isButtonDisabled = Object.keys(this.registerForm.controls).some(formKey => this.registerForm.controls[formKey].value);
})

// Add in ngOnDestroy - make sure you unsubscribe to prevent memory leaks!
this.formValueChangeSubscription.unsubscribe();

在 .html 文件中

<button [disabled]="isButtonDisabled" class="btn btn-primary mr-1">Register</button>

Answer 2

我们可以在响应式表单本身上添加验证。 有对反应形式的交叉验证

要将验证器添加到 FormGroup，请在创建时将新验证器作为第二个参数传入。

this.registerForm = this.formBuilder.group({
        title: [''],
        firstName: [''],
        lastName: [''],
        dob: [''],
    }, { validators: exampleValidator});

验证器函数将是这样的：

 export const exampleValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null => {
  const title = control.get('title');
  const firstName = control.get('firstName');
  const lastName = control.get('lastName');
  const dob = control.get('dob');
  return (title?.value || firstName?.value || lastName?.value || dob?.value) ? null : { inValid: true};
};

并且您可以使用响应式表单有效的“form.valid”禁用/启用提交按钮

 <div class="text-center">
            <button [disabled]="!registerForm?.valid"
           class="btn btn-primary mr-1">Register</button>
 </div>