How do I remove asterisk from required field in Angular Material and add (optional) beside label for optional labels

问题

I am using angular 2 material design for form fields. So with that every required fields appear with asterisk which i don't want.Also, for non-required fields, i want an optional text to be appear in brackets next to the label.

I am using something like below to achieve it but that's not working.

My code-

<md-input required md-no-asterisk id="" placeholder="First Name" [(ngModel)]="" ngControl="txtFirstName" #firstName="ngModel"></md-input>

When I am removing md-input starting and end tag and just using input tag then the asterisk goes away but some default text called appears as a value of the field.

I want to use required and optional fields as a label.

Any help would be much appreciated.

回答1:

So, following my comment, I looked on Angular Material's website.

Look :

as you can see, there's an after component, which contains the asterisk. Override this class with your own CSS to get rid of it.

EDIT : use the same principle to add your (optional) text for non required fields.

回答2:

For people who are still looking for answer. For Angular material 5 and 6. You can use [hideRequiredMarker]="hideRequired". In you component you can provide its value as hideRequired="true". By this you can show or hide asterisk according to your need. But this directive is a part of <mat-form-field> not of input elements.

<mat-form-field [hideRequiredMarker]="hideRequiredMarker">
  <input matInput placeholder="Simple placeholder" required>
</<mat-form-field>

Make sure to check the version of angular and angular material. These should match. Otherwise you can get errors. Thanks

来源：https://stackoverflow.com/questions/40217909/how-do-i-remove-asterisk-from-required-field-in-angular-material-and-add-option