Angular 2 make @Input on directive required

问题

In Angular 1 we could make a directive attribute required. How do we do that in Angular 2 with @Input? The docs don't mention it.

Eg.

Component({
    selector: 'my-dir',
    template: '<div></div>'
})
export class MyComponent {
  @Input() a:number; // Make this a required attribute. Throw an exception if it doesnt exist
  @Input() b:number;

  constructor(){

  }
}

回答1:

Check in ngOnInit() (inputs aren't yet set when the constructor is executed) whether the attribute has a value.

Component({
    selector: 'my-dir',
    template: '<div></div>'
})
export class MyComponent implements OnInit, OnChanges {
    @Input() a:number; // Make this a required attribute. Throw an exception if it doesnt exist
    @Input() b:number;

    constructor(){
    }

    ngOnInit() {
       this.checkRequiredFields(this.a);
    }

    ngOnChanges(changes) {
       this.checkRequiredFields(this.a);
    }

    checkRequiredFields(input) {
       if(input === null) {
          throw new Error("Attribute 'a' is required");
       }
    }
}

You might also check in ngOnChanges(changes) {...} if the values wasn't set to null. See also https://angular.io/docs/ts/latest/api/core/OnChanges-interface.html

回答2:

Official solution

As answered by Ryan Miglavs – smart usage of Angular's selectors solves the issue. Personally I prefer this way in most cases, as it doesn't require any additional effort during the codding time. However, it has some disadvantages:

it's not possible to understand what argument is missing from the error thrown
error is confusing itself as it says, that tag isn't recognized by Angular, when just some argument is missing

For alternative solutions – look below, they require some additional codding, but doesn't have disadvantages described above.

So, here is my solution with getters/setters. IMHO, this is quite elegant solution as everything is done in one place and this solution doesn't require OnInit dependency.

Solution #1

Component({
  selector: 'my-dir',
  template: '<div></div>'
})
export class MyComponent {
  @Input()
  get a () { throw new Error('Attribute "a" is required'); }
  set a (value: number) { Object.defineProperty(this, 'a', { value, writable: true, configurable: true }); }
}

Solution #2:

It could be done even easier with decorators. So, you define in your app once decorator like this one:

function Required(target: object, propertyKey: string) {
  Object.defineProperty(target, propertyKey, {
    get () {
      throw new Error(`Attribute ${propertyKey} is required`);
    },
    set (value) {
      Object.defineProperty(target, propertyKey, { value, writable: true, configurable: true });
    },
  });
}

And later in your class you just need to mark your property as required like this:

Component({
  selector: 'my-dir',
  template: '<div></div>'
})
export class MyComponent {
  @Input() @Required a: number;
}

Explanation:

If attribute a is defined - setter of property a will override itself and value passed to attribute will be used. Otherwise - after component init - first time you want to use property a in your class or template - error will be thrown.

Note: getters/setters works well within Angular's components/services, etc and it's safe to use them like this. But be careful while using this approach with pure classes outside Angular. The problem is how typescript converts getters/setters - they are assigned to prototype property of the class. In this case we do mutate prototype property which will be the same for all instances of class. Means we can get something like this:

const instance1 = new ClassStub();
instance1.property = 'some value';
const instance2 = new ClassStub();
console.log(instance2.property); // 'some value'

回答3:

The official Angular way to do this is to include the required properties in the selector for your component. So, something like:

Component({
    selector: 'my-dir[a]', // <-- Check it
    template: '<div></div>'
})
export class MyComponent {
    @Input() a:number; // This property is required by virtue of the selector above
    @Input() b:number; // This property is still optional, but could be added to the selector to require it

    constructor(){

    }

    ngOnInit() {

    }
}

The advantage to this is that if a developer does not include the property (a) when referencing the component in their template, the code won't compile. This means compile-time safety instead of run-time safety, which is nice.

The bummer is that the error message the developer will receive is "my-dir is not a known element", which isn't super clear.

I tried the decorator approach mentioned by ihor, and I ran into issues since it applies to the Class (and therefore after TS compilation to the prototype), not to the instance; this meant that the decorator only runs once for all copies of a component, or at least I couldn't find a way to make it work for multiple instances.

Here are the docs for the selector option. Note that it actually allows very flexible CSS-style selector-ing (sweet word).

I found this recommendation on a Github feature request thread.

回答4:

You can do it like this:

constructor() {}
ngOnInit() {
  if (!this.a) throw new Error();
}

回答5:

For me, I had to do it this way:

ngOnInit() { if(!this.hasOwnProperty('a') throw new Error("Attribute 'a' is required"); }

FYI, If you want to require @Output directives, then try this:

export class MyComponent {
    @Output() myEvent = new EventEmitter(); // This a required event

    ngOnInit() {
      if(this.myEvent.observers.length === 0) throw new Error("Event 'myEvent' is required");
    }
}

回答6:

Why not use the @angular/forms library to validate your @Inputs? The following solution:

Fails fast (not just when the @input value is accessed by the component for the first time)
Allows re-using rules that you've already used for your Angular forms

Usage:

export class MyComponent {

  @Input() propOne: string;
  @Input() propTwo: string;

  ngOnInit() {
    validateProps<MyComponent>(this, {
      propOne: [Validators.required, Validators.pattern('[a-zA-Z ]*')],
      propTwo: [Validators.required, Validators.minLength(5), myCustomRule()]
    })
  }
}

Utility function:

import { FormArray, FormBuilder, ValidatorFn, FormControl } from '@angular/forms';

export function validateProps<T>(cmp: T, ruleset: {[key in keyof T]?: ValidatorFn[]} ) {
  const toGroup = {};
  Object.keys(ruleset)
    .forEach(key => toGroup[key] = new FormControl(cmp[key], ruleset[key]));
  const formGroup = new FormBuilder().group(toGroup);
  formGroup.updateValueAndValidity();
  const validationResult = {};
  Object.keys(formGroup.controls)
    .filter(key => formGroup.controls[key].errors)
    .forEach(key => validationResult[key] = formGroup.controls[key].errors);
  if (Object.keys(validationResult).length) {
    throw new Error(`Input validation failed:\n ${JSON.stringify(validationResult, null, 2)}`);
  }
}

来源：https://stackoverflow.com/questions/35528395/angular-2-make-input-on-directive-required

标签

angular

angular2-directives