[Angular] Form che fa il refresh della pagina

[fermat]

ciao!

è la prima volta che mi capita questa cosa, e su tutti i forma che ho nel progetto, solo questo ha questo comportamento.

questo il componente:

export class LoginComponent {


  frm = new FormGroup({
    u_email: new FormControl('', [
      Validators.email,
      Validators.required,
      Validators.pattern('^[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,4}$')
    ]),
    u_password: new FormControl('', Validators.required),
  });


  constructor(
      private authService: UtentiService,
      private router: Router,
      private msgService: MessageService,
  ) {
  }


  submit(): void {
    const credenziali: Credenziali = {
      u_email: this.frm.get('u_email').value,
      u_password: CryptoJS.SHA512(this.frm.get('u_password').value).toString()
    };


    console.log(credenziali);


    this.authService
        .login(credenziali)
        .subscribe((res) => {
              console.log(res);


              // if (res.res === 'ko') {
              //   this.msgService.add({
              //     key: 'tst',
              //     severity: 'error',
              //     summary: `${res.message}`,
              //   });
              // } else {
              //   this.router.navigate(['']);
              // }


            }
        );
  }


}

questo l'html:

  <form [formGroup]="frm">
	<input pInputText formControlName="u_email" placeholder="Email" class="w-20rem mb-3">
	<p-password formControlName="u_password" placeholder="Password" [feedback]="false"
				inputStyleClass="w-20rem mb-3"></p-password>
	<button pButton label="Login" type="button" class="w-20rem" (click)="submit()" [disabled]="!frm.valid"></button>
  </form>

questo il service:

  login(credenziali: Credenziali): Observable<LoginResponse> {
    const url = `${this.baseUrl}?controller=utenti&method=login`;
    return this.http.post(url, credenziali).pipe(
        map((res: LoginResponse) => res)
    );
  }

in pratica dopo la submit fa il refresh della pagina e quindi se le credenziali sono errate non mi fa vedere il messaggio.
ma ho levato tutti i redirect, e ripeto che in altri form non ho questo comportamente.
qualche idea??

[alka]

Quel (click)="submit()" è corretto?

Se metti un pulsante di con type="submit" e togli l'evento succede lo stesso?
Chiamando il submit() da codice, non c'è bisogno di un "ref" o qualcosa del genere?

Dopo anni di utilizzo di Angular, React, Vue e affini, continuo a pensare che tutta questa fatica per fare dei login o delle pagine di applicazioni "business" sia uno sforzo smisurato per la semplicità del risultato da ottenere. Sarà una mia battaglia nei prossimi anni.

[fermat]

ciao alka!

guarda, ti posto un altro form che strutturalmente è uguale (a parte i campi dico):

<form [formGroup]="frm">


        <div class="p-fluid p-formgrid grid">


          <div class="field col-12 md:col-4">
            <label>Email *</label>
            <input pInputText type="text" formControlName="cont_email">
          </div>


          <div class="field col-12 md:col-4">
            <label>Nome *</label>
            <input pInputText type="text" formControlName="cont_nome">
          </div>


          <div class="field col-12 md:col-4">
            <label>Cognome *</label>
            <input pInputText type="text" formControlName="cont_cognome">
          </div>


          <div class="field col-12 md:col-4">
            <label>Tipologia</label>
            <p-dropdown formControlName="cont_tipo"
                        placeholder="Seleziona"
                        optionLabel="name"
                        optionValue="name"
                        [options]="tipiOspite"
                        [showClear]="true">
            </p-dropdown>
          </div>


          <div class="field col-12 md:col-4">
            <label>Accompagno ?</label>
            <br>
            <p-inputSwitch formControlName="cont_accompagno"/>
          </div>


          <div class="field col-12 md:col-4">
            <label>Scegli chi accompagna</label>
            <p-dropdown formControlName="cont_accompagnato_id"
                        placeholder="Seleziona"
                        optionValue="id"
                        optionLabel="nome"
                        filterBy="nome"
                        [options]="contattiAccompagno"
                        [filter]="true"
                        [showClear]="true">
            </p-dropdown>
          </div>


          <div class="field col-12 md:col-2">
            <label>Ha risposto ?</label>
            <br>
            <p-inputSwitch formControlName="cont_risposto"/>
          </div>


          <div class="field col-12 md:col-2">
            <label>Partecipa ?</label>
            <br>
            <p-inputSwitch formControlName="cont_partecipa"/>
          </div>


          <div class="field col-12 md:col-2">
            <label>Disinscritto ?</label>
            <br>
            <p-inputSwitch formControlName="cont_disinscritto"/>
          </div>


          <div class="field col-12 md:col-2">
            <label>Da ricontattare ?</label>
            <br>
            <p-inputSwitch formControlName="cont_ricontattare"/>
          </div>


          <div class="field col-12 md:col-2">
            <label>Email errata ?</label>
            <br>
            <p-inputSwitch formControlName="cont_email_errata"/>
          </div>


          <div class="field col-12 md:col-2">
            <label>Test ?</label>
            <br>
            <p-inputSwitch formControlName="cont_test"/>
          </div>


          <div class="field col-12 md:col-6">
            <label>Ente</label>
            <input pInputText type="text" formControlName="cont_ente">
          </div>


          <div class="field col-12 md:col-6">
            <label>Ca</label>
            <input pInputText type="text" formControlName="cont_ca">
          </div>


          <div class="field col-12">
            <label>Note</label>
            <p-editor formControlName="cont_note" [style]="{'height':'250px'}"></p-editor>
          </div>


        </div>


        <!-- ATTRIBUTI -->


        <p-fieldset legend="Piani viaggio">


          <div class="p-fluid p-formgrid grid">
            <div class="field col-12">
              <div class="flex justify-content-start flex-wrap">
                <p-dropdown placeholder="Seleziona tipo"
                            optionLabel="valore"
                            [options]="attributiGenerali"
                            (onChange)="onAttrChange($event)"/>


                <button pButton type="button" icon="pi pi-plus" label="Aggiungi" style="max-width: 300px;"
                        (click)="addFormAttributi()" class="p-button-secondary ml-3"></button>
              </div>
            </div>
          </div>


          <div formArrayName="attributi" style="min-width: 100% !important;"
               *ngFor="let item of frm.get('attributi')['controls']; let i = index;">


            <div [formGroup]="item" class="p-fluid p-formgrid grid">


              <input pInputText type="hidden" formControlName="conta_gruppo">
              <input pInputText type="hidden" formControlName="conta_nome">
              <input pInputText type="hidden" formControlName="conta_tipo">


              <div class="field col-10">
                <label>{{ item.get('conta_nome').value }}</label>


                @switch (item.get('conta_tipo').value) {
                  @case ('string') {
                    <input pInputText type="text" formControlName="conta_valore">
                  }
                  @case ('bool') {
                    <p-inputSwitch formControlName="conta_valore" class="ml-3"/>
                  }
                  @case ('datettime') {
                    <p-inputMask formControlName="conta_valore"
                                 mask="99/99/9999"
                                 placeholder="99/99/9999"
                                 slotChar="dd/mm/yyyy"></p-inputMask>
                  }
                }


              </div>


              <div class="field col-2">
                <button pButton type="button" icon="pi pi-trash" (click)="delFormAttributi(i, item)"
                        class="p-button-rounded p-button-sm p-button-raised p-button-danger mt-5"></button>
              </div>


            </div>


          </div>


        </p-fieldset>
        <!-- END ATTRIBUTI -->


        <div class="p-grid p-jc-end mt-5">
          <!--
          [disabled]="!frm.valid"
          -->
          <button pButton type="button" icon="pi pi-check" label="Salva" (click)="submit()"
                  [disabled]="!frm.valid"></button>
        </div>


      </form>

il submit:

  submit(): void {
    const data = {...this.frm.value};
    data['cont_utente_fk'] = this.utenteFK;
    data['cont_evento_fk'] = this.eventoFk;


    // console.clear();
    // console.log(data);


    this.contattiService.addOrUpdate(data)
        .subscribe((res) => {
              this.messageService.add({
                    key: 'tst',
                    severity: res.res === 'ok' ? 'success' : 'error',
                    summary: `Contatto`,
                    detail: res.message,
                  }
              );


              if (res.res === 'ok') {
                this.getData();
              }
            }
        );


  }

questo ha il comportamento normale.
invia i dati e poi fa le altre operazioni senza refresh.
quindi mi fa vedere il messaggio di ok/errore e se la risposta è ok fa il refresh dei dati.
di form così ne ho fatti Nmila, e solo quello sopra si comporta così.