时间戳

首页 > 解决方案 > 验证用户输入 Angular

angular - 验证用户输入 Angular

问题描述

我是第一次使用 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>

标签： angularformsvalidation

解决方案

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

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

推荐阅读