Make styling of messages easier

davidwalschots · davidwalschots · commit 2576d21b18f9 · 2018-05-04T17:21:03.000+02:00
Formerly, due to default styling overriding styling would require use
of !important. By removing default styling this is no longer an issue.
diff --git a/angular-reactive-validation/src/validation-messages/validation-messages.component.scss b/angular-reactive-validation/src/validation-messages/validation-messages.component.scss
diff --git a/angular-reactive-validation/src/validation-messages/validation-messages.component.ts b/angular-reactive-validation/src/validation-messages/validation-messages.component.ts
@@ -15,7 +15,6 @@ import { ReactiveValidationModuleConfigurationToken } from '../reactive-validati
 @Component({
   selector: 'arv-validation-messages',
   templateUrl: './validation-messages.component.html',
-  styleUrls: ['./validation-messages.component.scss'],
   encapsulation: ViewEncapsulation.None
 })
 /**
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -11,9 +11,6 @@
     </label>
     <br />
     <arv-validation-messages [for]="['firstName', 'middleName', 'lastName']">
-      <arv-validation-message for="firstName" key="required">
-        Required validation test!!!
-      </arv-validation-message>
       <arv-validation-message #minlengthValidation for="firstName" key="minlength">
         minLength validation test!!! {{minlengthValidation.context?.requiredLength}}
       </arv-validation-message>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -15,7 +15,7 @@ export class AppComponent {
 
   form = this.fb.group({
     name: this.fb.group({
-      firstName: ['', [Validators.required(),
+      firstName: ['', [Validators.required('A first name is required'),
         Validators.minLength(10),
         Validators.maxLength(5, (maxLength => `Maximum length is ${maxLength}`))]],
       middleName: ['', [Validators.maxLength(50, (maxLength => `Maximum length is ${maxLength}`))]],
diff --git a/src/index.html b/src/index.html
@@ -7,6 +7,16 @@
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <style>
+    .invalid-feedback {
+      color: white;
+      font-size: 12px;
+      line-height: 14px;
+      background-color: red;
+      border-radius: 3px;
+      width: 100%;
+    }
+  </style>
 </head>
 <body>
   <arv-root></arv-root>
