验证用户输入角度

Posted 2021-04-21

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

答案

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

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