Me enfrento al problema de que mat-form-field requería asterik incluso si no hay ningún error. Me gustaría mostrar un asterisco azul si no hay ningún error. He pasado mucho tiempo pero no soy capaz de resolverlo. Si alguien sabe lo que está mal, por favor hágamelo saber. Gracias
<mat-form-field appearance="outline" class="input-field-large input-normal-wide" matInput> <mat-label>Name</mat-label> <input (input)="onNameChange()" formControlName="name" type="text" autocomplete="off" matInput maxlength="50" required="required" /> <mat-icon *ngIf="form.hasError('required', 'name') && isNameSubmitted" class="mdi mdi-24px mdi-alert-circle" matSuffix > </mat-icon> <mat-error *ngIf="form.hasError('required', 'name') && isNameSubmitted"> <span>{{ "This field is mandatory" | translate }}</span> </mat-error> <mat-error *ngIf="form.hasError('maxlength', 'name') && isNameSubmitted"> <span>{{ "Maximum 50 charachers are allowed" | translate }}</span> </mat-error> </mat-form-field>Dado que está utilizando un campo de formulario con la directiva formControlName , supongo que tiene un formGroup, si solo quiere asegurarse de que la entrada tenga un valor, no use el required directamente en la plantilla, en su lugar use Validators en el archivo .ts de su componente.
Por ejemplo:
public myFormGroup: FormGroup = new FormGroup({ name: new FormControl('', Validators.required) })En el constructor de FormControl puede pasar, como segundo parámetro, una función de validación o una matriz de funciones de validación. La función requerida es una de ellas, los validadores predefinidos adicionales son:
y más.
También puede definir una función personalizada si la necesita.
Si desea cambiar el color del "*", agregue este .css a su "styles.css" (no en el componente.css)
.mat-focused .mat-form-field-required-marker { color:blue } .ng-invalid.ng-touched.mat-focused .mat-form-field-required-marker { color:red }Solo quiero ocultar el "*" que usas
[required]="form.hasError('required','name')?true:null"Ver el stackblitz