تایپاسکریپت - دکمه ارسال Angular Material کار نمیکند

من دارم از Angular Material برای ایجاد یک فرم ورود استفاده میکنم، با این حال دکمه ارسال کار نمیکند و هیچ خطایی در کنسول دریافت نمیکنم. در ابتدا سعی کردم یک درخواست HTTP از طریق آن ارسال کنم اما کار نکرد، بنابراین فقط از یک لاگ ساده برای تست استفاده کردم و همچنان کار نمیکند.

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');
  }}

پاسخ شماره ۱

دکمه ارسال شما جزو فرم شما نیست

باید باشد

<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>

پاسخ شماره ۲

شما () را در فراخوانی متد Submit خود از دست دادهاید و دکمه ارسال خارج از form است. آن را داخل form قرار دهید. باید به صورت زیر باشد.

TS

(ngSubmit)="Submit()"

اچتیامال

  <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>