Question

在我的angular 4应用程序中，我想在字段下显示错误消息，如果字段是必需的，并且某些模式不受尊重。

但是当我在一个表单组中时遇到问题，在我的情况下，我在mat-stepper的第一步内部，当我尝试查看使用.hasError('pattern')时是否有错误时我有这个错误：

错误TypeError：jit_nodeValue_4（...）。hasError不是函数在Object.eval [as updateDirectives]

这是html：

    <mat-horizontal-stepper [linear]="true" class="custom-stepper">
        <mat-step [stepControl]="firstFormGroup">
        <form [formGroup]="firstFormGroup">
        <ng-template matStepLabel>Primo step</ng-template>

       <mat-form-field> <input matInput rebusFocus
        formControlName="licensePlate" #licensePlate
         (keyup)="searchLicensePlate(licensePlate.value, $event)" placeholder="{{'ticket.new.labels.licenseplate' | translate }}"
            [matAutocomplete]="licensePlateAuto" name="licensePlate">
            <mat-icon matSuffix>directions_car</mat-icon> </mat-form-field>
            <mat-autocomplete #licensePlateAuto="matAutocomplete"
             (change)="setLicensePlate(licensePlate)"> <mat-option
                *ngFor="let licensePlate of licensePlates"
                [value]="licensePlate.licensePlate">
                <div class="row">
                  <span>{{licensePlate.licensePlate}}</span>
                </div>
            </mat-option> </mat-autocomplete>

                <small *ngIf="licensePlate.hasError('pattern')"
                    class="text-danger">{{
                        'form.validation.licenseplatepattern' | translate }}</small>

在我的.ts：

firstFormGroup: FormGroup;

this.firstFormGroup = this._formBuilder.group({
      licensePlate: ['', [Validators.pattern('^[A-Za-z0-9]{4,8}$')]],
      engineType: [''],
      engine: ['', [Validators.pattern('^[0-6]{1}$')]],
      particulatedFilter: [],
      miniBus: [],
      area: [],
      hotel: []
    });

Answer 1

尝试使用以下内容：

[ngClass]="{
   'invalid': licensePlate.invalid && (licensePlate.dirty || licensePlate.touched),
   'valid': licensePlate.valid && (licensePlate.dirty || licensePlate.touched)
 }">

和

*ngIf="licensePlate.errors.hasOwnProperty(pattern)"

或只是：

*ngIf="licensePlate.errors"

我希望它有所帮助

访问FormGroup问题中的字段

1 个答案: