TS2693 'string' only refers to a type, but is being used as a value here

Question

I have the following child component

@EntryComponent({
  type: PhoneNumberComponent,
  name: 'PhoneNumberComponent'
})
@Component({
  moduleId: module.id,
  providers: [],
  selector: '[phone-number-cmp]',
  templateUrl: '../views/phone-number.html'
})
export class PhoneNumberComponent {
  @Input() parentForm: FormGroup;
  @Input() control: AbstractControl;
  @Input() label: string;
  @Input() className: string;
  @Input() errorMessageRequired: string;
  @Input() errorMessagePattern: string;
}

somewhere in there is throwing the TSlint error TS2693 'string' only refers to a type, but is being used as a value here

I have tried to re assign the @Input variable/values to a local variable, without any success to get rid of that error.

  <div phone-number-cmp
       class="phone-number"
       [parentForm]="parentForm"
       [control]="officePhoneNumber"
       [label]="'Office Phone Number'"
       [className]="'officePhoneNumber'"
       [errorMessageRequired]="'Office phone number is required.'"
       [errorMessagePattern]="'Office phone number must contain 10 numbers. (e.g. XXX XXX XXXX)'"
  ></div>
  <div phone-number-cmp
       class="phone-number"
       [parentForm]="parentForm"
       [control]="faxPhoneNumber"
       [label]="'Fax Phone Number'"
       [className]="'faxPhoneNumber'"
       [errorMessageRequired]="'Fax phone number is required.'"
       [errorMessagePattern]="'Fax phone number must contain 10 numbers. (e.g. XXX XXX XXXX)'"
  ></div>

I'm passing the string values like the above.

Does anyone know how to get rid of that message?

Answer 1

My solution was to pass in the values from the parent

.html
  <div phone-number-cmp
       class="phone-number"
       [parentForm]="parentForm"
       [control]="officePhoneNumber"
       [label]="officePhoneNumberLabel"
       [className]="officePhoneNumberClassName"
       [errorMessageRequired]="OfficePhoneNumberRequired."
       [errorMessagePattern]="OfficePhoneNumberPattern"
  ></div>

.ts
@EntryComponent({
  type: ContactInfoComponent,
  name: 'ContactInfoComponent'
})
@Component({
  moduleId: module.id,
  providers: [],
  selector: '[contact-info-cmp]',
  templateUrl: '../views/contact-info.html'
})
export class ContactInfoComponent {
  @Input() parentForm: FormGroup;
  @Input() officePhoneNumber: AbstractControl;
  @Input() faxPhoneNumber: AbstractControl;
  @Input() emailAddress: AbstractControl;
  @Input() contactPerson: AbstractControl;
  OfficePhoneNumberLabel: string = 'Office Phone Number';
  OfficePhoneNumberClassName: string = 'officePhoneNumber';
  OfficePhoneNumberRequired: string = 'Office phone number is required.';
  OfficePhoneNumberPattern: string = 'Office phone number must contain 10 numbers. (e.g. XXX XXX XXXX)';
}