feat(directive): a new custom attribute on a field (#12)

.all-contributorsrc

@@ -62,6 +62,15 @@
  "code",
  "test"
  ]
+ },
+ {
+ "login": "mlc-mlapis",
+ "name": "Miloš Lapiš",
+ "avatar_url": "https://avatars3.githubusercontent.com/u/5693835?v=4",
+ "profile": "http:https://www.mlc.cz",
+ "contributions": [
+ "code"
+ ]
  }
  ],
  "contributorsPerLine": 7

README.md

@@ -157,6 +157,25 @@ The custom `anchor` can also be added as a directive, in which case it'll act as
 ```
 <!-- prettier-ignore-end -->
 
+- `controlErrorsIgnore` - A custom attribute on a form field element to skip instantiating of a control error component on it.
+
+One typical case when to use it is radio buttons in the same radio group where it's enough to show only one error message and not all of them for each separate radio button.
+
+<!-- prettier-ignore-start -->
+```html
+<div class="form-group">
+ Communication language: &nbsp;
+ <input type="radio" name="languages" formControlName="languages" value="en" id="en" [controlErrorAnchor]="anchorRadio" />
+ <label class="form-radio-label" for="en">English</label>
+ <input type="radio" name="languages" formControlName="languages" value="de" id="de" controlErrorsIgnore />
+ <label class="form-radio-label" for="de">German</label>
+ <input type="radio" name="languages" formControlName="languages" value="cs" id="cs" controlErrorsIgnore />
+ <label class="form-radio-label" for="cs">Czech</label>
+ <ng-template controlErrorAnchor #anchorRadio="controlErrorAnchor"></ng-template>
+</div>
+```
+<!-- prettier-ignore-end -->
+
 ## CSS Styling
 
 The library adds a `form-submitted` to the submitted form. You can use it to style your inputs:
@@ -241,6 +260,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
  <td align="center"><a href="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/theblushingcrow"><img src="https://avatars3.githubusercontent.com/u/638818?v=4" width="100px;" alt=""/><br /><sub><b>Inbal Sinai</b></sub></a><br /><a href="https://github.com/@ngneat/error-tailor/commits?author=theblushingcrow" title="Documentation">📖</a></td>
  <td align="center"><a href="https://twitter.com/dmorosinotto"><img src="https://avatars2.githubusercontent.com/u/3982050?v=4" width="100px;" alt=""/><br /><sub><b>Daniele Morosinotto</b></sub></a><br /><a href="https://github.com/@ngneat/error-tailor/commits?author=dmorosinotto" title="Code">💻</a> <a href="https://github.com/@ngneat/error-tailor/commits?author=dmorosinotto" title="Documentation">📖</a> <a href="#example-dmorosinotto" title="Examples">💡</a></td>
  <td align="center"><a href="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/rhutchison"><img src="https://avatars3.githubusercontent.com/u/1460261?v=4" width="100px;" alt=""/><br /><sub><b>Ryan Hutchison</b></sub></a><br /><a href="https://github.com/@ngneat/error-tailor/issues?q=author%3Arhutchison" title="Bug reports">🐛</a> <a href="https://github.com/@ngneat/error-tailor/commits?author=rhutchison" title="Code">💻</a> <a href="https://github.com/@ngneat/error-tailor/commits?author=rhutchison" title="Tests">⚠️</a></td>
+ <td align="center"><a href="http:https://www.mlc.cz"><img src="https://avatars3.githubusercontent.com/u/5693835?v=4" width="100px;" alt=""/><br /><sub><b>Miloš Lapiš</b></sub></a><br /><a href="https://github.com/@ngneat/error-tailor/commits?author=mlc-mlapis" title="Code">💻</a></td>
  </tr>
 </table>
 

projects/ngneat/error-tailor/src/lib/control-error.directive.spec.ts

@@ -39,6 +39,8 @@ describe('ControlErrorDirective', () => {
  <input type="checkbox" formControlName="terms" id="check" [controlErrorAnchor]="anchor" />
  <ng-template controlErrorAnchor #anchor="controlErrorAnchor"></ng-template>
 
+ <input formControlName="ignored" placeholder="Ignored" controlErrorsIgnore />
+
  <div formArrayName="names">
  <div *ngFor="let name of form.controls.names.controls; index as i">
  <input [formControl]="name" placeholder="Name {{ i }}" />
@@ -53,6 +55,7 @@ describe('ControlErrorDirective', () => {
  form = this.builder.group({
  name: this.createName(),
  terms: [false, Validators.requiredTrue],
+ ignored: ['', Validators.required],
  names: this.builder.array([this.createName(), this.createName()], this.validator)
  });
 
@@ -104,6 +107,14 @@ describe('ControlErrorDirective', () => {
  expect(spectator.query(byText(/error/))).toBeNull();
  });
 
+ it('should not show errors on interactions', () => {
+ const ignoredInput = spectator.query<HTMLInputElement>(byPlaceholder('Ignored'));
+
+ typeInElementAndFocusOut(spectator, '', ignoredInput);
+
+ expect(spectator.query(byText('required error'))).toBeFalsy();
+ });
+
  it('should show errors on async statusChanges', fakeAsync(() => {
  const serverError = 'server error';
  const nameInput = spectator.query<HTMLInputElement>(byPlaceholder('Name'));

projects/ngneat/error-tailor/src/lib/control-error.directive.ts

@@ -22,7 +22,8 @@ import { FormSubmitDirective } from './form-submit.directive';
 import { ErrorsMap } from './types';
 
 @Directive({
- selector: '[formControlName], [formControl], [formGroup], [formGroupName], [formArrayName], [ngModel]'
+ selector:
+ '[formControlName]:not([controlErrorsIgnore]), [formControl]:not([controlErrorsIgnore]), [formGroup]:not([controlErrorsIgnore]), [formGroupName]:not([controlErrorsIgnore]), [formArrayName]:not([controlErrorsIgnore]), [ngModel]:not([controlErrorsIgnore])'
 })
 export class ControlErrorsDirective implements OnInit, OnDestroy {
  @Input('controlErrors') customErrors: ErrorsMap = {};

src/app/app.component.html

@@ -12,6 +12,24 @@
  <ng-template controlErrorAnchor #anchor="controlErrorAnchor"></ng-template>
  </div>
 
+ <div class="form-group">
+ <span class="form-radio-group-label">Communication language:</span>
+ <input
+ type="radio"
+ name="languages"
+ formControlName="languages"
+ value="en"
+ id="en"
+ [controlErrorAnchor]="anchorRadio"
+ />
+ <label class="form-radio-label" for="en">English</label>
+ <input type="radio" name="languages" formControlName="languages" value="de" id="de" controlErrorsIgnore />
+ <label class="form-radio-label" for="de">German</label>
+ <input type="radio" name="languages" formControlName="languages" value="cs" id="cs" controlErrorsIgnore />
+ <label class="form-radio-label" for="cs">Czech</label>
+ <ng-template controlErrorAnchor #anchorRadio="controlErrorAnchor"></ng-template>
+ </div>
+
  <section formGroupName="address">
  <div class="form-group">
  <input class="form-control" formControlName="city" placeholder="City" controlErrorsClass="my-class" />

src/app/app.component.scss

@@ -2,3 +2,12 @@
  border: 1px solid red;
  border-radius: 3px;
 }
+
+.form-radio-group-label {
+ padding-right: 10px;
+}
+
+.form-radio-label {
+ padding: 5px 5px 2px 5px;
+ margin-bottom: 0px;
+}

src/app/app.component.ts

@@ -26,6 +26,7 @@ export class AppComponent {
  this.form = this.builder.group({
  name: ['', [Validators.required, Validators.minLength(3)]],
  terms: [false, Validators.requiredTrue],
+ languages: ['', Validators.required],
  animal: [null, Validators.required],
  address: this.builder.group(
  {