मैं कोणीय 6 ऐप में कोणीय सामग्री का उपयोग कर रहा हूं।

        <mat-form-field fxFlex>
            <mat-label [class.form-label]="fg.get('email').valid && fg.get('email').touched">{{attributesLabels.email}}</mat-label>
            <input matInput formControlName="email" required [autofocus]="true">
            <mat-error *ngIf="fg.get('email').hasError('required')">Email is required</mat-error>
            <mat-error *ngIf="fg.get('email').hasError('email') && !fg.get('email').hasError('required') ">Invalid email</mat-error>
        </mat-form-field>

यह आवश्यक फ़ील्ड है और इस इनपुट फ़ील्ड के प्लेसहोल्डर में, "*" नीचे दिए गए प्लेसहोल्डर के बाद संलग्न है: यहां छवि विवरण दर्ज करें

मैं प्लेसहोल्डर में "*" के रंग को लाल रंग में बदलना चाहता हूं। मैं रंग कैसे बदल सकता हूँ?

उपरोक्त मैट-फॉर्म-फ़ील्ड द्वारा जेनरेट किया गया एचटीएमएल:

enter image description here

2
Johar Zaman 10 सितंबर 2018, 22:12

6 जवाब

सबसे बढ़िया उत्तर

ckIkram का सुझाव अच्छा था लेकिन मैंने दूसरा समाधान निकाला।

कोणीय सामग्री एक लेबल के रूप में जगह धारक का इलाज करती है, इसलिए मैंने इस सीएसएस को तारांकन का रंग बदलने के लिए लिखा है *।

/deep/ label span.mat-form-field-required-marker{
   color:red;
}

यह वही है जो मेरे लिए काम करता है लेकिन सावधानी का एक शब्द, /गहरा/चयनकर्ता का मूल्यह्रास होता है, इसलिए अंततः यह भविष्य में काम नहीं करेगा ...

1
Johar Zaman 11 सितंबर 2018, 22:59

अपनी css फ़ाइल में निम्न कोड जोड़ें:

::ng-deep .mat-form-field-required-marker { color: red }
1
warseb 25 अप्रैल 2020, 11:02

MatFormField पर एक इनपुट है जिसका आप उपयोग कर सकते हैं hideRequiredMarker जैसा कि आप यहां देख सकते हैं https ://material.angular.io/components/form-field/api

   <mat-form-field fxFlex hideRequiredMarker="true">
        <mat-label [class.form-label]="fg.get('email').valid && fg.get('email').touched">{{attributesLabels.email}}</mat-label>
        <input matInput formControlName="email" required [autofocus]="true">
        <mat-error *ngIf="fg.get('email').hasError('required')">Email is required</mat-error>
        <mat-error *ngIf="fg.get('email').hasError('email') && !fg.get('email').hasError('required') ">Invalid email</mat-error>
    </mat-form-field>

तो हो सकता है कि आप सीएसएस में छद्म क्लास के साथ अपना खुद का सामान करने का प्रयास कर सकें: बाद में

1
Ckram 10 सितंबर 2018, 23:10

दुर्भाग्य से यहां तक ​​कि प्लेसहोल्डर टेक्स्ट की स्टाइलिंग काफी प्रयोगात्मक है, और मैंने कोशिश की लाल सितारा पाने के लिए :after छद्म चयनकर्ता जोड़ना, लेकिन यह काम नहीं किया।

नीचे वह निकटतम है जो मैं आप चाहते थे कि मैं प्राप्त कर सकूं।

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #ccc;
}

::-moz-placeholder { /* Firefox 19+ */
  color: #ccc;
}

:-ms-input-placeholder { /* IE 10+ */
  color: #ccc;
}

:-moz-placeholder { /* Firefox 18- */
  color: #ccc;
}
  
label:after {
  content: " *";
  color: #ff0000;
  }
<label>Email</label>
<br/>
<input type="email" placeholder="Email" class="required">

वैकल्पिक रूप से, आप संपूर्ण प्लेसहोल्डर टेक्स्ट को लाल बना सकते हैं, और उसमें एक तारा शामिल कर सकते हैं।

0
Yvonne Aburrow 10 सितंबर 2018, 22:46

मेरे लिए यह सुपर सिंपल चीज़ स्टाइल में प्रोजेक्ट की जड़ में थी

.mat-form-field-required-marker { color: red }
7
Robbie Smith 15 जिंदा 2020, 00:54

बस इसे आज़माएं, html भाग में

 <mat-form-field class="mat-form-field-fluid" appearance="outline">
    <mat-label class="asterisk_input" >First Name</mat-label>
    <input matInput formControlName="email" />
</mat-form-field>

और घटक .css फ़ाइल में निम्न कोड जोड़ें

.asterisk_input::after 
{
    content:" *"; 
    color: red;
}
5
Ajinz 27 अगस्त 2019, 14:07