Блог

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

Заранее спасибо,

Вот код для проверки формы (используется сборка электронной почты в валидаторе в соответствии с моим требованием)

Вход.Component.html

 <form id="loginForm" #validform="ngForm" (ngSubmit)="onSubmit(validform)">
    <div class="example-container">

        <mat-form-field>
            <input matInput placeholder="UserName" [formControl]="userName" autofocus>
            <mat-error *ngIf="userName.hasError('email') amp;amp; !userName.hasError('required')">
                Please enter a valid email address
            </mat-error>
            <mat-error *ngIf="userName.hasError('required')">
                Email is
                <strong>required</strong>
            </mat-error>
            <br>
        </mat-form-field>
        <mat-form-field>
            <input matInput type="password" placeholder="Password" [formControl]="password">
            <mat-error *ngIf="password.hasError('required')">
                Password is
                <strong>required</strong>
            </mat-error>
        </mat-form-field>


    </div>
    <button type="submit" class="btn btn-success btn-block" [disabled]="userName.hasError('email') || password.hasError('required')"
        id="login_btn">Login</button>
</form>
 

Вход.Component.ts

 import { Component,OnInit, OnChanges, Injectable } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { Validators,NgForm, NgModel } '@angular/forms';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css'
  ]
})


export class LoginComponent implements OnInit {

/* validate form */
validform;

userName : any;
password : any;

constructor(){ }

ngOnInit(){
         this.buildForm();
}
buildForm(){
   this.userName = new FormControl("", Validators.compose([
        Validators.required,
        Validators.email,
      ])),
      this.password =   new FormControl('', [
        Validators.required,
      ])}
onSubmit = function(validform: NgForm){
       //Call the login api with validForm Data
}


 }
 

Надеюсь, это поможет.

Просто поставьте ng-disabled на кнопку отправки. Что-то вроде этого должно работать.Вы должны дать форме имя для проверки angular, чтобы работать с ней.

 <form name="myform">
  <input type="email" name="email" ng-model="email" placeholder="Email Address" required /></input>
  <input type="password" name="password" required></input>
  <button type="submit" ng-disabled="myform.$invalid"> Submit </button>
</form>