验证用户输入 Angular答案

【问题标题】：Validating user input Angular验证用户输入 Angular
【发布时间】：2020-05-05 14:53:24
【问题描述】：

我是第一次使用 Angular 表单。我正在尝试创建一个验证输入的表单。我看不到让它工作。我收到错误“RegisterComponent 类型上不存在属性名称”。我觉得我错过了一些东西，但所有教程都只显示这个。这是我的代码：

    <div class="container">
      <h1>Register</h1>
      <p>Fill in all the fields to register</p>
      <hr>
      <form ng-app="app" name="registerForm">

        <div class="form-group">
        <label for="firstName">Name</label>
        <input id="name" type="text" class="form-control" name="name" ngModel required minlength="3" maxlength="30">
        <div *ngIf="name.$invalid && (name.touched || name.dirty)" class="alert alert-danger"></div>
    </div>

【问题讨论】：

请显示您的类型脚本文件。另外，你用form标签包裹了表格吗？
当使用模板驱动表单和验证时，您创建一个模板引用变量并 eul 到 ngModel，例如#myname="ngModel"。 this myname 是您使用的变量，Angular 不考虑“id”或“name”，只考虑“模板引用变量”。您可以在文档中看到：angular.io/guide/form-validation#template-driven-validation。注意：检查反应式表单的任何方式 - 是创建表单的另一种方式，这提供了更多的通用性 -

标签： angular forms validation

【解决方案1】：

某些属性值未正确绑定。尝试此代码一次。

HTML：

<form [formGroup]="registerForm">
    <div class="form-group">
      <label for="firstName">firstName</label>
      <input formControllerName="firstName" type="text" maxlength="255" class="form-control" formControlName="firstName" id="firstName" [ngClass]="{'is-invalid': firstName.invalid && firstName.dirty}"/>
      <div class="invalid-feedback">
          firstName is required
        </div>
    </div>
</form>

TS 代码：

    registerForm: FormGroup;
       ngOnInit() {
        this.registerForm = this.formBuilder.group({
          firstName: [this.registerForm.firstName, Validators.compose([Validators.required, Validators.maxLength(255)])],
        });
      }
        get firstName() { return this.registerForm.get('firstName'); }

 var firsNameObtained = this.firstName.value;//on form submit

【讨论】：