如何对角度必填字段进行表单验证

Question

I want to validate my form by using Angular form validation.I have read many articles which give info on how to validate form before submitting. But My question is how can i validate form for required field eg For my login form I have two fields One user name and Password. Without entering any field values ,user clicks on login button. So in this scenarion how to do validation in angular.

Thanks in advance,

Answer 1

Here is the code for validating form (Used email build in validator as per my requirement)

Login.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') && !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>

Login.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
}


 }

Hope this will help.

Answer 2

Just put an ng-disabled on the submit button. Something like this should work.You must give the form a name for angular validation to work on it.

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