त्रुटि संदेश कैसे सत्यापित करें और प्रदर्शित करें - कोणीय 2 सामग्री डिजाइन?

Question

मैं इस इनपुट:

<form #f="ngForm" name="productForm"> 
    <md-input [(ngModel)]="product.price" name="price" required="true" placeholder="Price (USD)"></md-input> 
    <div ng-messages="productForm.price.$error" role="alert"> 
     <div ng-message-exp="['required']"> 
       Price is required 
      </div> 
    </div> 
</form> 

लेकिन संदेश कीमत की आवश्यकता है दिखाई नहीं देता।

मुझे त्रुटि संदेश को सही ढंग से कैसे प्रारूपित करना चाहिए?

एनजी-अमान्य वर्ग प्रकट होता है जब कीमत इनपुट खाली है:

जब मैं कुछ भरें:

कोणीय injects एनजी-मान्य कक्षा में यह। नकल करने के लिए यह करने के लिए है

Answer 1

उम्मीद है कि इस angular2-सामग्री विकसित रूप में जोड़ दिया जाएगा, लेकिन वर्तमान में जिस तरह से:

मैं चाहता हूँ शैली angular1 md design के समान है कि इस तरह दिखता है है dividercolor सेट करें और एमडी-एचआईएनटी निर्देश का उपयोग करें। उदाहरण:

<md-input placeholder="Email address" 
    #email="ngModel" 
    name="email" 
    type="text" 
    fullWidth={true} 
    [(ngModel)]="model.email" 
    required 
    email 
    dividerColor="{{ !email.valid ? 'warn' : 'primary' }}"> 
    <md-hint [hidden]="email.pristine || email.valid"> 
     <span [hidden]="email.errors?.required || !email.errors?.email"> 
      This doesn't appear to be a valid email address. 
     </span> 
     <span [hidden]="!email.errors?.required">Email address is required.</span> 
    </md-hint> 
</md-input> 

Answer 2

प्रमाणीकरण संदेश अब कोणीय सामग्री संस्करण 2.0.0 के साथ डाला जा सकता है। प्रलेखन here देखें।

<form class="example-form"> 
    <mat-form-field class="example-full-width"> 
    <input matInput placeholder="Email" [formControl]="emailFormControl"> 
    <mat-error *ngIf="emailFormControl.hasError('pattern')"> 
     Please enter a valid email address 
    </mat-error> 
    <mat-error *ngIf="emailFormControl.hasError('required')"> 
     Email is <strong>required</strong> 
    </mat-error> 
    </mat-form-field> 
</form>