Bdtjtk

In my ngForm all are ok. But I am not able to get the console value on submit. any one help me to know the issue here?

my ts file :

import { Component } from "@angular/core";

import { NgForm } from "@angular/forms";



@Component({

  selector: "app-root",

  templateUrl: "./app.component.html",

  styleUrls: ["./app.component.css"]

})

export class AppComponent {

  selectedUser = {

    name: "",

    username: "",

    password: ""

  };



  patternName = /^[a-zA-Z ]{3,}$/;

  patternUsername = /^[a-z]{3,}$/;

  patternPassword = /s/;



  constructor() {}



  ngOnInit() {}



  onSubmit(form: NgForm) {

    console.log("submitted", form.value);

  }

}

and the html is :

<form

  class="form-horizontal"

  #formSignin="ngForm"

  (ngSubmit)="formSignin.valid && onSubmit(formSignin)"

>

  <div class="page-header"><h2>User Sign-in</h2></div>

  <div class="form-group">

    <label class="control-label col-sm-2" for="name">Name</label>

    <input

      type="text"

      class="col-sm-4"

      #name="ngModel"

      name="name"

      id="name"

      placeholder="Enter Name"

      [(ngModel)]="selectedUser.name"

      required

      [pattern]="patternName"

    />

    <div *ngIf="formSignin.submitted && !name.valid">

      <span *ngIf="name.errors.required">Name must to be filled</span>

    </div>

    <div *ngIf="name.errors?.pattern">

      Username should be min 3 charactors and alphabets only

    </div>

  </div>

  <div class="form-group">

    <label class="control-label col-sm-2" for="username">User Name</label>

    <input

      type="text"

      class="col-sm-4"

      #username="ngModel"

      name="username"

      id="username"

      placeholder="Enter Username"

      [(ngModel)]="selectedUser.username"

      required

    />

    <div *ngIf="formSignin.submitted && !username.valid">

      <span *ngIf="username.errors.required">Username Must filled</span>

    </div>

  </div>

  <div class="form-group">

    <label class="control-label col-sm-2" for="password">Password</label>



    <input

      type="password"

      class="col-sm-4"

      #password="ngModel"

      name="password"

      [pattern]="patternPassword"

      id="password"

      placeholder="Enter Password"

      [(ngModel)]="selectedUser.password"

      required

    />



    <div *ngIf="formSignin.submitted && !password.valid">

      <span *ngIf="password.errors.required">Password required</span>

    </div>

    <div *ngIf="!password.errors?.required && !password.errors?.pattern">

      Space not allowed

    </div>

  </div>

  <div class="form-group d-flex">

    <label class="col-sm-2"></label>

    <div><button type="submit" class="btn btn-default">Submit</button></div>

  </div>

</form>

Live demo : https://codesandbox.io/s/wnj9nj1l55

You didn't put the ngSubmit right..

The right way to do is to only assigned a function and in the function check if the form is valid !

onSubmit(form: NgForm) {

if (form.valid) {

  console.log("submitted", form.value);

} else {

  console.log("form not valid !");

}

}

https://codesandbox.io/s/0xvky6woz0

EDIT

Your RegEx for the password is invalid, so even if the name and the username is valid, the password is not.. I don't know what you are looking for but something like this will work: /^[a-z]+/i


EDIT 2

And in case you want a password with everything except space: /^[a-zA-Z_-]+$/

Also, you had an error in your html file:

 <div *ngIf="!password.errors?.required && password.errors?.pattern">

  Space not allowed

</div>

this is the working example you can try this
https://codesandbox.io/s/lyqx80n32z

here i used password pattern it will not allow you to enter space in the password field

patternPassword = /^S{0,50}$/;

and modified your error message condition

 <div *ngIf="!password.errors?.required && password.errors?.pattern">

  Space not allowed

</div>