Question

我有一个使用反应形式技术的形式

<div class="form-group">
          <label for="contact">Contact Number :</label>
          <input  formControlName="phone" class="form-control" type="text"/>
          <span class="errorMsg" *ngIf="!signUpForm.get('name').valid && signUpForm.get('name').touched">Contact number must be 10 Characters long.</span>
          </div>

这是我用于接受联系电话的输入框。我对此输入框有两个验证。

phone: ['',[Validators.required, Validators.minLength(10), Validators.maxLength(10), Validators.pattern('dummyRegx')]],

现在，我想为regX失败或长度不满足时显示不同的错误消息。对不同的验证者显示不同错误的最佳方法是什么。我的表单名称是loginForm。

所以我正在尝试类似

{{loginForm.get('phone').errors.minLength}}

但是我没有得到任何提示

Answer 1

我正在这样使用

            <mat-form-field class="col-4">
                <input matInput [matDatepicker]="datainicio"  placeholder="De" [min]="minDate()" formControlName="datainicio_FCN" [(ngModel)]="anotacao.inicioVigencia"  >
                <mat-datepicker-toggle matSuffix [for]="datainicio"></mat-datepicker-toggle>
                <mat-datepicker #datainicio></mat-datepicker>               
                <mat-error *ngIf="formularioAnotacoes.get('datainicio_FCN').hasError('required')">Data inicial é Obrigatória</mat-error>        
                <mat-error *ngIf="formularioAnotacoes.get('datainicio_FCN').hasError('matDatepickerMin')">Data inicial deve ser maior que a data atual.</mat-error>
                <mat-error *ngIf="formularioAnotacoes.get('datainicio_FCN').hasError('imcompativeis')">Data inicial e data Final são incompatíveis</mat-error>
            </mat-form-field>


this.formularioAnotacoes = this.fb.group({
  filtroTipoSaida_FCN: ['', Validators.required],
  codigoProduto_FCN:  ['', Validators.required],
  documentoFornecedor_FCN: [''],
  titulo_FCN: ['', Validators.required],
  descricao_FCN:['', Validators.required],
  criticidadeSelecionada_FCN: ['',  Validators.required],
  datainicio_FCN: [null,  Validators.compose([  Validators.required, datasIncompativeis('datainicio_FCN','datafim_FCN' )])],
  datafim_FCN: [null, Validators.compose([ datasIncompativeis('datainicio_FCN','datafim_FCN' )])]      
});

Answer 2

组件类

export class DemoComponent {
profileForm = this.fb.group({
firstName: ['', [Validators.required,Validators.minLength(10), Validators.maxLength(10)]],
});

constructor(private fb: FormBuilder) { }
}

HTML

名字：

 <span class="errorMsg"
 *ngIf="!profileForm.get('firstName').valid && !profileForm.get('firstName').pristine && profileForm.get('firstName').errors.required">Require.</span> 

      <span class="errorMsg"
 *ngIf="!profileForm.get('firstName').valid && !profileForm.get('firstName').pristine && profileForm.get('firstName').errors.minlength">min 5 char</span> 

           <span class="errorMsg"
 *ngIf="!profileForm.get('firstName').valid && !profileForm.get('firstName').pristine && profileForm.get('firstName').errors.maxlength">max 10 Characters long.</span> 

{{profileForm.get('firstName') | json}}

 </form>

针对反应角形式的不同验证器显示不同的错误消息

2 个答案: