我使用角度模板驱动表单创建简单表单答案

【问题标题】：I create simple form using angular template driven form我使用角度模板驱动表单创建简单表单
【发布时间】：2021-05-31 16:57:51
【问题描述】：

但我收到了这个错误，

对象可能是'null 您必须输入至少 3 个字符

为什么我的错误对象总是 null，minlength 没有存储在我的错误对象中这是什么原因？

我的 hero.ts 文件是，

export class Hero {

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

}

我的 formone.component.ts 文件是，

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','chamara@gmail.com');

  submitted = false;

  onSubmit() { this.submitted = true; }

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


  


}

我的 formone.component.html 文件是，

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

请帮我解决这个问题，

【问题讨论】：

标签： html angular typescript

【解决方案1】：

您的方法似乎很好（至少对我而言），您可能需要注意一些事情

从输入代码中删除多余的#X（这会导致错误检查的误导）并尝试添加name?.errors?.minlength，只是在检查错误时交叉检查名称是否存在。

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

您可以在此处查看有关模板驱动的错误处理的更多信息：

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

编码愉快.. :)

【讨论】：