I create simple form using angular template driven form

Question

but I got this error,

Object is possibly 'null <span *ngIf="name.errors.minlength">You must enter atleast 3 characters

why my error object is always null,minlength is not store in my error object what is the reason for that?

My hero.ts file is,

export class Hero {

  constructor(
    public id: number,
    public name: string,
    public email: string
  ) {  }

}

My formone.component.ts file is,

import { Component, OnInit } from '@angular/core';
import {NgForm} from "@angular/forms";
import {Hero}  from "../../hero"



@Component({
  selector: 'app-formone',
  templateUrl: './formone.component.html',
  styleUrls: ['./formone.component.css']
})
export class FormoneComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }


  model = new Hero(1, 'chamara','[email protected]');

  submitted = false;

  onSubmit() { this.submitted = true; }

 
  get diagnostic() { return JSON.stringify(this.model); }


  


}

My formone.component.html file is,

<div class="container mt-3">


  <div class="row">

    <div class="col-md-2">



    </div>

    <div class="col-md-8">

      <h4>Template Driven Forms</h4>
      <form #formone="ngForm" (ngSubmit)="onSubmit()">

        {{diagnostic}}
        <div class="form-group">
          <label for="name">Name</label>
          <input type="text" class="form-control" id="name"
                 required
                 [(ngModel)]="model.name" name="name" #name="ngModel" minlength="3" #x>


        </div>



        <div *ngIf="!name.valid" class="alert alert-danger" >

          <span *ngIf="name.errors.minlength">You must enter atleast 3 characters</span>
          <span *ngIf="name.errors.required">This field required</span>

        </div>









        <div class="form-group">
          <label for="alterEgo">Email</label>
          <input type="email"  class="form-control" id="alterEgo"
                 [(ngModel)]="model.email" name="alterEgo">
        </div>

        <br>
        <button type="submit"   class="btn btn-primary" [disabled]="!formone.form.valid">Submit</button>




      </form>




    </div>


    <div class="col-md-2">



    </div>




  </div>







</div>

Plz help me to fix this,

Ganesh · Accepted Answer · 2021-03-02 06:58:11Z

1

Your Approach seems to be fine (at least for me), might you need to take care of few things

Remove extra #X from input code (this is causing issue by misleading error checking) and try to add name?.errors?.minlength just cross check name exists while checking errors.

<input type="text" class="form-control" id="name" required
                [(ngModel)]="model.name" name="name" #name="ngModel" minlength="3">

<span *ngIf="name?.errors?.minlength">You must enter atleast 3 characters</span>

You can check more about template driven error handling here:

https://medium.com/swlh/form-validation-with-angular-template-driven-forms-8e0756cbec5

Happy Coding.. :)

answered Mar 2, 2021 at 6:58

Ganesh

6,0663 gold badges26 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

I create simple form using angular template driven form

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related