Кнопка подачи углового материала не работает

Question

Я использую угловой материал для создания формы входа, однако кнопка отправки не работает, и я не получаю никаких ошибок в консоли. сначала я пытался отправить запрос http через него, но он не работал, поэтому я просто использовал простой журнал для проверки, и он все еще не работает.

login.html:

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

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

Answer 1

Ваша кнопка отправки не является частью вашей формы

Должно быть

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

Answer 2

Вы пропустили () в вас Отправить вызов метода и кнопка отправки находится за пределами form. положить его внутрь form. Это должно быть следующим.

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>