Question

我有一个角度材料表格。它有几个与地址有关的字段。有一个mat-select元素，允许用户从以前保存的地址列表中进行选择。用户单击地址时，将填充字段。但是，填充字段不会自动显示验证错误。 “城市/州”字段使用正则表达式检查模式，并在输入的值与模式不匹配时用红色突出显示该字段。

当用户直接编辑该字段时，此规则将按预期工作，但是如果该字段由mat-select填充，则该规则将不起作用。

这是表单字段：

        <mat-form-field class="w-100 mt-25 city-field" [class.input-disabled]="form.get('CityState')?.disabled">
          <input type="text" [maxLength]='formControlMaxlength?.CityState' matInput formControlName="CityState" placeholder="*City / State" [matAutocomplete]="auto" />
        </mat-form-field>

mat-select位于另一个组件中，但这是该组件的HTML：

          <mat-form-field class="w-100 mt-25" [class.input-disabled]="form.get('JobAddressID')?.disabled">
            <mat-select placeholder="*Select Saved Location" formControlName="JobAddressID">
              <mat-option value="0">Select previously used address</mat-option>
              <mat-option *ngFor="let elem of savedLocations | async" [value]="elem.value">
                  {{ elem.name | truncateString: 60 }}
              </mat-option>
            </mat-select>
          </mat-form-field>

这是模型验证的简化版本：

    this.formGroup = this.fb.group({
      FormattedAddress: [''],
      JobRelocation: [{ value: relocationOption, disabled: !this.templateFieldAttributeService.RelocationOptionsMode }],
      JobAddressID: [{ value: locationId, disabled: !this.templateFieldAttributeService.JobLocationMod }],
      DispCity: [{ value: this.model.DisplayCity, disabled: !this.templateFieldAttributeService.DisplayCityNameMode }, Validators.maxLength(64)],
      JobAddress: this.fb.group({
        CityState: [{
          value: cityState,
          disabled: !this.templateFieldAttributeService.JobLocationMod
        }, [dependencyValidator(this.model, 'ZipCode', 'this.model[\'AdditionalLocations\'].length > 0'), Validators.pattern(/^.{1,64},\s?[a-zA-Z]{1,50}$/)]],
      })
    });

实际上正确设置了无效状态，但是我也需要更改CSS。它使用默认的角度材质样式，无效时会突出显示红色。选择一个选项时，我需要添加一些内容来使其验证表单字段吗？

使用mat-select应用表单字段验证

0 个答案: