angular - Gönderimden önce form doğrulamasını nasıl zorlarım?

Formumdaki her doğrulamanın yalnızca kullanıcı bir değer girdiğinde ve odak çıktığında tetiklenmesini sağlamam gerekiyor. Bu, bir değer girilip kullanıcı enter tuşuna bastığında bir probleme yol açıyor. Değer geçersiz olsa bile (ama null değer ile) form gönderiliyor.

Belki bir örnek bu durum için daha yararlı olacaktır.

Bu, bileşen sınıfıdır:

readonly formGroup: FormGroup;

private constructor() {
  this.formGroup = new FormGroup(
    {
      firstControl: new FormControl(null),
      secondControl: new FormControl(null, Validators.minLength(4))
    },
    { updateOn: "blur" }
  );
}

onSubmit() {
  if (this.formGroup.valid) {
    // some logic here
  }
}

ve HTML yapısı:

<form [formGroup]="formGroup" (ngSubmit)="onSubmit()">
  <label>First control</label>
  <input formControlName="firstControl" />
  <br />
  <label>Second control</label>
  <input formControlName="secondControl" />
  <br />
  <button>Submit</button>
</form>

Bu örnekte, abc değeri girildiğinde ve ikinci kontrolde enter tuşuna basıldığında, form gönderilir.

Not: onSubmit() fonksiyonundaki if ifadesinden önce document.activeElement.blur() eklemek için bir çözüm buldum. Bu çözüm projemde kabul edilemez.

Cevap #1

Form geçersizse, bunu FormGroup.markAllAsTouched metodunu çağırarak başarabilirsiniz. Ve form grubunu zorla doğrulamak istiyorsanız, valid özelliğini kontrol etmeden önce FormGroup.updateValueAndValidity metodunu çağırabilirsiniz, şöyle:

onSubmit() {
  this._updateValueAndValidity();

  if (this.formGroup.invalid) {
    this.formGroup.markAllAsTouched(); // will set all the controls as touched 
  } else {
    // some logic here
  }
}

/** Update the value of form-group and validity of it and its descendants */
private _updateValueAndValidity() {
    for (let controlName in this.formGroup.controls) {
        this.formGroup.controls[controlName].updateValueAndValidity();
    }
}

Cevap #2

Böyle bir şey deneyebilirsiniz:

private formGroup!: FormGroup;

    constructor(public fb: FormBuilder) {

    }
    
    ngOnInit(): void {
        this.initForm();
    }

    initForm() {
        this.formGroup = this.fb.group(
            {
                firstControl: new FormControl(null),
                secondControl: new FormControl(null),
                thirdControl: new FormControl(null),
            },
            {
                validators: [
                    this.validateMinLength("secondControl", 4),
                    this.validateMinLength("thirdControl", 6)
                ],
            })

    }

    private validateMinLength(controlName: string, minLength: number) {
        return (formGroup: FormGroup) => {
            const control = formGroup.controls[controlName];

            if (control.value && control.value.length < minLength) {
                control.setErrors({ max: true });
            } else {
                control.setErrors(null);
            }
        };
    }