Using more than one @input() decorator - ionic 4

Question

I'm running a ionic 4 app

I created a message component, which loads accordingly to the error passed as @Input to it.

<control-messages [control]="saveUserForm.get('age')"></control-messages>

so it loads the FormControl validation and displays it's custom message as defined by me in it's service;

What I wanted to know, is if there's some way to send more than one property to the component, I wanted to dynamically decorate the <p class='help'></p> with a success | warn | danger

This is the component:

  @Component({
    selector: 'control-messages',
    template: `<p class="help" *ngIf="errorMessage !== null">{{errorMessage}}</p>`
  })
  export class ControlMessagesComponent {
    @Input() control: FormControl;

    constructor() { }

    get errorMessage() {
      for (const propertyName in this.control.errors) {
        if (this.control.errors.hasOwnProperty(propertyName) && this.control.touched) {
          return ValidationService.getValidatorErrorMessage(propertyName, this.control.errors[propertyName]);
        }
      }
      return null;
    }
  }

How can I sent trough the parent another param to load in it's template as {{color}}, like

    template: `<p class="help {{color}}" *ngIf="errorMessage !== null">{{errorMessage}}</p>`

score 6 · Accepted Answer · answered Nov 06 '19 at 15:14

6

You can set input as many as you want:

parent html:

<control-messages 
    [control]="saveUserForm.get('age')"
    color="success">
</control-messages>

child ts:

export class ControlMessagesComponent {
    @Input() control: FormControl;
    @Input() color: string;

child html:

template: `<p class="help {{color}}" *ngIf="errorMessage !== null">{{errorMessage}}</p>`

But if you are checking the success | warn | danger from your formControl there is no need to send it from parent.

answered Nov 06 '19 at 15:14

Fateme Fazli

11,582
2
31
48

1

Why does the first decorator goes with `[]`, and the second one doesn't? I believe that was the mistake I was making – Matheus Batista Nov 06 '19 at 16:23
1

decorators doesn't relate each other. – Fateme Fazli Nov 06 '19 at 16:30
1

@MatheusBatista because `[color]=` expects a object and just a plain input like `color` expects a string. But when you cann still use it with `[]` like this `[color]="'red'"` – Norbert Bartko Nov 06 '19 at 16:34
1

@MatheusBatista Thank you, I did'n understand his question. see https://stackoverflow.com/questions/43633452/when-to-use-square-brackets-in-directives-inputs-and-when-not – Fateme Fazli Nov 06 '19 at 16:36

score 4 · Answer 2 · answered Nov 06 '19 at 15:15

You can add as many inputs as you want to e.g:

@Component({
    selector: 'control-messages',
    template: `<p class="help" [style.color]="color" *ngIf="errorMessage !== null">{{errorMessage}}</p>`
  })
  export class ControlMessagesComponent {
    @Input() control: FormControl;
    @Input() color: string;
 ...

Usage:

<control-messages 
    [control]="saveUserForm.get('age')"
    color="red">
</control-messages>

Using more than one @input() decorator - ionic 4

2 Answers2