Angular 为反应式表单的不同验证器显示不同的错误消息

我有一种形式，我在其中使用反应形式技术

<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>

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

所以我在尝试类似的东西

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

但是我没有得到任何东西

我是这样使用的

            <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' )])]      
});

数据输入法
数据集成开发服务维护数据对象。
数据初始e数据最终são Complatíveis
this.formularioAnotacoes=this.fb.group({
filtroTipoSaida_FCN:[''，验证器。必需]，
codigoProduto_FCN:[''，验证器。必需]，
税务局局长的文件：['']，
titulo_FCN:[''，验证器。必需]，
描述FCN:[''，需要验证人]，
criticidadeSelecionada_FCN:[''，验证器。必需]，
datainicio_FCN:[null，Validators.compose（[Validators.required，datacompativeis（'datainicio_FCN'，'datafim_FCN'））]，
datafim_FCN:[null，Validators.compose（[datacompativeis（'datainicio_FCN'，'datafim_FCN'））]
});

组件类

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

constructor(private fb: FormBuilder) { }
}

Html

名字：

Require。
最小5个字符
最多10个字符长。
{{profileForm.get（'firstName'）| json}

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

constructor(private fb: FormBuilder) { }
}

 <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>