typescript - Angular material skicka-knapp fungerar inte

Jag använder Angular Material för att skapa ett inloggningsformulär, men skicka-knappen fungerar inte och jag får inga fel i konsolen. Först försökte jag skicka en HTTP-förfrågan genom den men det fungerade inte, så jag använde bara en enkel logg för att testa och det fungerar fortfarande inte.

login.html :

<mat-card>
 <mat-card-content>
  <form class="my-form" #loginForm=ngForm (ngSubmit)="Submit()">
   <mat-form-field class="full-width">
    <mat-label>Email</mat-label>
    <input matInput class="form-control" [formControl]="emailControl" placeholder="Enter Your Nickname"
     type="email">

    <mat-error *ngIf="emailControl.hasError('email')">

     Please enter a valid email address
    </mat-error>
    <mat-error *ngIf="emailControl.hasError('required')">
     Email is <strong>required</strong>
    </mat-error>
   </mat-form-field>

   <mat-form-field class="full-width">
    <mat-label>Password</mat-label>
    <input [formControl]="passwordControl" matInput name="password" type="password" class="form-control"
     placeholder="Enter Your  Password">
    <mat-error *ngIf="passwordControl.hasError('required')">
     Password is <strong>required</strong>
    </mat-error>
    <mat-error *ngIf="passwordControl.hasError('minLength')">
     Password should be more then 7 characters
    </mat-error>
   </mat-form-field>
  </form>
 </mat-card-content>
 <mat-card-actions>
  <button mat-raised-button type="submit" color="primary">LOGIN</button>
 </mat-card-actions>
</mat-card>

login.component.ts:

import { CustomValidators } from '../../custom-validators';
import { Component, OnInit } from '@angular/core';
import { FormControl,FormGroup,Validators} from '@angular/forms';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent {
  emailControl = new FormControl('', [Validators.required, Validators.email]);
  passwordControl = new FormControl('', [Validators.required,
    Validators.minLength(8)]);
  
    constructor(private http :HttpClient) { 
    
    }
Submit(){
    console.log('workin');
  }}

Svar #1

Din skicka-knapp är inte en del av ditt formulär

Borde vara

<form class="my-form" #loginForm=ngForm (ngSubmit)="Submit()">
          <mat-form-field class="full-width">
            <mat-label>Email</mat-label>
            <input matInput class="form-control"
             [formControl]="emailControl"
             placeholder="Enter Your Nickname" type="email">

            <mat-error *ngIf="emailControl.hasError('email')">

              Please enter a valid email address
            </mat-error>
            <mat-error *ngIf="emailControl.hasError('required')">
              Email is <strong>required</strong>
            </mat-error>
          </mat-form-field>

          <mat-form-field class="full-width">
            <mat-label>Password</mat-label>
            <input [formControl]="passwordControl"
             matInput name="password"
             type="password" 
             class="form-control"
              placeholder="Enter Your  Password">
            <mat-error *ngIf="passwordControl.hasError('required')">
              Password is <strong>required</strong>
            </mat-error>
            <mat-error *ngIf="passwordControl.hasError('minLength')">
              Password should be more then 7 characters
            </mat-error>
          </mat-form-field>
      </mat-card-content>
      <mat-card-actions>
        <button mat-raised-button type="submit" color="primary">LOGIN</button>
      </mat-card-actions>
    </mat-card>
</form>

Svar #2

Du har missat () i ditt anrop till Submit-metoden och submit-knappen är utanför form. Sätt den inuti form. Det bör vara som följer.

TS

(ngSubmit)="Submit()"

HTML

  <form class="my-form" #loginForm=ngForm (ngSubmit)="Submit()">
    ...
     <mat-card-actions>
            <button mat-raised-button type="submit" color="primary">LOGIN</button>
     </mat-card-actions>
    ...
    </form>

Relaterade artiklar