Please don't mind bad formatting, prettier fault.

Anyways this is the code and everytime I try to submit the form, it always alert me that form is invalid but I can't figure out what's the problem. I tried to look in the console but no error is showed, I tried to print every validators and there's no problem. I tried eliminate validators and doesn't work either.

HTML:

<form
      (ngSubmit)="sendSec()"
      id="securityForm"
      [formGroup]="securityForm"
      *ngIf="account == true && security == false"
    >
      <div
      style="--src: url(/assets/3194b4caa397732f830bfe0b138177db.png)" 
      >
        <div >
          <div >
            <div ></div>
            <input
              formControlName="password"
              name="password"
              id="password"
              type="password"
              
            />
            <div
              *ngIf="
                submitted &&
                (f.password.errors?.required || f.password.errors?.minlength)
              "
            >
              <div >
                <i  aria-hidden="true"></i>
              </div>
              <div >
                Deve essere di minimo 6 caratteri.
              </div>
            </div>
            <input
              formControlName="confirmPassword"
              name="confirmPassword"
              id="confirmPassword"
              type="password"
              
            />
            <div
              *ngIf="
                submitted &&
                (f['confirmPassword'].getError('required')!=null ||
                  f['confirmPassword'].getError('MustMatch')!=null)"
            >
              <div >
                <i  aria-hidden="true"></i>
              </div>
              <div >
                Le password non coincidono.
              </div>
            </div>
            <input
              type="text"
              formControlName="username"
              name="username"
              
            />
            <div *ngIf="submitted && f.username.errors?.required">
              <div >
                <i  aria-hidden="true"></i>
              </div>
              <div >
                L'username è obbligatorio.
              </div>
            </div>
            <h5 >Conferma</h5>
            <h5 >Sicurezza</h5>
            <h5 >Account</h5>
            <h4 >
              <div >
                <span 
                  >Hai già un account? </span
                ><a href="#" 
                  >Effettua il Login {{ securityForm.status }}</a
                >
              </div>
            </h4>
            <h5 >Password</h5>
            <h5 >Username</h5>
          </div>
          <hr  />
          <div
            style="--src: url(/assets/6ce8f24296ede4b57a422c835871f40b.png)"
            
          ></div>
          <div
            style="--src: url(/assets/b65d846e44bc48b429628e7cc6f08892.png)"
            
          ></div>
          <div
            style="--src: url(/assets/b65d846e44bc48b429628e7cc6f08892.png)"
            
          ></div>
          <h1 >Sicurezza</h1>
          <div
            style="--src: url(/assets/753f034d86efc3290055b095e9193cd0.png)"
            
          ></div>
          <input
            type="submit"
            value="AVANTI"
            
          />
          <div
            style="--src: url(/assets/93fc3510c0d5302b1bf4b75b9c14a8b9.png)"
            
          ></div>
        </div>
      </div>
    </form>

app.component.ts

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';


@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css'],
})
export class RegisterComponent implements OnInit {
  account: boolean = true;
  security: boolean = false;
  submitted: boolean = false;
  success = '';
  accountForm: FormGroup;
  securityForm: FormGroup;

  constructor(private fb: FormBuilder, private http: HttpClient) {
    this.securityForm = this.fb.group({
      'username': ['', [Validators.required]],
      'password': ['', [Validators.required, Validators.minLength(6), Validators.pattern('^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,16}$')]],
      'confirmPassword': ['', [Validators.required]]
    },
    {
      validators: this.MustMatch('password', 'confirmPassword')
    });
  }
  ngOnInit(): void {
  }
  get f(){
    return this.securityForm.controls;
  }
  MustMatch(controlName: string, matchingControlName: string){
    return(formGroup:FormGroup)=>{
      const control = formGroup.controls[controlName];
      const matchingControl = formGroup.controls[matchingControlName];
      if(matchingControl.errors && !matchingControl.errors['MustMatch'])
        return;
      if(control.value !== matchingControl.value)
        matchingControl.setErrors({MustMatch:true});
      else
        matchingControl.setErrors(null);
    }
  }
sendSec():void {
    this.submitted = true;
    if(this.securityForm.invalid){   
      alert('always invalid');
      alert(this.f['username'].value ' ' this.f['password'].value ' ' this.f['confirmPassword'].value);
      return;
    }
    else{
      alert('valid');
      this.security = true;
      this.submitted = false;
    }
  }
}

CodePudding user response：

Cannot replicate. I put your code more or less verbatim in Stackblitz, and it works fine.

https://stackblitz.com/edit/angular-ivy-fu6j1q?file=src/app/app.component.html,src/app/app.component.ts,src/app/app.module.ts

CodePudding user response：

I feel like your return types are wrong in the must match factory function. Try this please(I haven't tested it):

MustMatch(controlName: string, matchingControlName: string){
    return(formGroup:FormGroup)=>{
      const control = formGroup.controls[controlName];
      const matchingControl = formGroup.controls[matchingControlName];
      if(formGroup.errors && !formGroup.errors['MustMatch'])
        return null;
      if(control.value !== matchingControl.value)
        return {MustMatch:true};
      else return null;
    }
  }