html - Angular، تعطيل زر الإرسال باستخدام [disabled] للتحقق من صحة النموذج

أحاول تعطيل زر الإرسال باستخدام شرط [disable]=form.controls[...].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>

أنا أستخدم Angular مع TypeScript وحزمة myDatePicker من هذا الرابط. هل يمكن لأي شخص مساعدتي من فضلك؟

الإجابة رقم 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>

الإجابة رقم 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>