Question

我正在尝试使用Angular Form Validation验证学生对象的数据，但是当我想使用或打印例如学生的serialNumber时，它会给我这个错误：无法读取未定义的属性'serialNumber'。这是代码：

<div *ngIf="student">
  <div class=container>
    <h2>Student {{student.name}} details</h2>
    <form name="studentForm" (ngSubmit)="save()">
      <!--<div ng-class="{ 'has-error' : studentForm.serialNumber.$invalid && !studentForm.serialNumber.t">-->

        <label>Serial number: {{student.serialNumber}} </label>
        <input type="text" name="serialNumber" class="form-control" ng-model="student.serialNumber" required>

        <div ng-messages="studentForm.serialNumber.$error">
          {{studentForm.serialNumber}}
            <p ng-message="required">Your name is required!</p>
        </div>
      <!--</div>-->
      <div>
        <label>Name: {{student.name}}</label>
        <input ng-model="student.name" placeholder="name">
      </div>
      <div>
        <label>Group number: {{student.groupNumber}}</label>
        <input ng-model="student.groupNumber" placeholder="groupNumber">
      </div>

      <button (click)="goBack()">Back</button>
      <button (click)="save()">Save</button>
    </form>
  </div>
</div>

Answer 1

Angular 2+中不存在ng-messages和ng-model属性指令。我建议您阅读Angular Forms，ReactiveForms和Template Syntax。

如果要对输入值进行双数据绑定，可以使用以下语法执行此操作：[(ngModel)]="student.serialNumber"。但是，在Angular 2+中，通常有更好的方法来获取除明确数据绑定之外的值。

Answer 2

角形验证模板驱动模型

  onSubmit(form : NgForm) {
    
      console.log(form);
        
  }

<form #form="ngForm" (ngSubmit)="onSubmit(form)" 
                [ngClass]="{'was-validated': form.invalid && (form.dirty || form.touched)}">
                <div class="" ngModelGroup="User">
                    <h2 class="text-center">Registration page</h2>
                    <br />                 
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="First Name" name="firstname" required
                            ngModel #firstname="ngModel">
                        <span class="help-bpx" *ngIf="firstname.touched && !firstname.valid ">Please enter the
                            firstname</span>
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Last Name" name="lastname" required ngModel
                            #lastname="ngModel">
                        <span class="help-bpx" *ngIf="lastname.touched && !lastname.valid ">Please enter the
                            lastname</span>
                    </div>
                    <div class="form-group">
                        <input type="email" class="form-control" id="email" placeholder="Email" name="email" email
                            required ngModel #email="ngModel">
                        <span class="help-bpx" *ngIf="email.touched && !email.valid ">Please enter the Email
                            Value</span>
                    </div>
                    <div class="form-group">
                        <div class="custom-file">
                            <input type="file" class="custom-file-input" id="customFile" required ngModel name="file" #file="ngModel">
                            <label class="custom-file-label" for="customFile">Choose file</label>
                          </div>
                    </div>
                    
                    <br />
                    <div class="align-center">
                        <button type="submit" class="btn btn-primary" [disabled]="!form.valid">Register</button>
                    </div>
                </div>
            </form>

Angular Form Validation错误：表单未定义

2 个答案: