在嵌套表单要素上使用有角材料表单字段错误消息

时间:2019-09-16 21:27:43

标签: angular angular-material

我正在尝试弄清楚如何使用Angular Material的Form Field错误消息。

打字稿:

    this.firstFormGroup = this._formBuilder.group({
       personalInfo: this._formBuilder.group({
       email: ['', [Validators.required, Validators.email]],
       password: ['', Validators.required],
       passwordConfirm: ['', Validators.required]
    });

     getErrorMessage() {
       return this.email.hasError('required') ? 'You must enter a value' :
         this.email.hasError('email') ? 'Not a valid email' : '';
     }

HTML:

            <ng-container formGroupName="personalInfo">
               <ng-template matStepLabel class="tb_type-group__copy">Personal Info</ng-template>
               <div class="row column">
                  <div class="row">
                    <h4 class="tb_heading--h4">Account Info</h4>
                  </div>
               <mat-form-field>
                <input matInput class="tb_input" type="text" placeholder="Email" formControlName="email" required>
                 <mat-error>{{getErrorMessage()}}</mat-error>
              </mat-form-field>
              <mat-form-field>
                <input #email matInput class="tb_input" type="password" placeholder=" Password"
                  formControlName="password" required>
                <mat-hint>Passwords must include 1 uppercase, 1 lowercase, 1 number, and 1 special character. e.g.
                  P@ssw0rd</mat-hint>
              </mat-form-field>
              <mat-form-field>
                <input matInput class="tb_input" type="password" placeholder="Confirm Password"
                  formControlName="passwordConfirm" required>
              </mat-form-field>
            </div>
          </ng-container>

我正在尝试使用有关如何使用表格错误的材料教程,但是我不知道如何访问元素。他们的示例是一个控制元素,其中我的元素嵌套在两组中。我如何才能使它正常工作。如果我只是插入他们的基本示例,则错误消息会起作用,因此它不是角度材料导入问题或类似问题。

0 个答案:

没有答案