After receiving an object from the API, I created a form using an array of objects in TypeScript. Although the form is rendered correctly, it fails to translate when I try to localize the application.
import { SpecializedAreasComponents } from 'src/app/models/SpecializedAreasComponent';
import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
@Component({
selector: 'citation-constraint-form',
templateUrl: './citation-constraint-form.component.html',
styleUrls: ['./citation-constraint-form.component.scss'],
})
export class CitationConstraintFormComponent implements SpecializedAreasComponents, OnInit {
form: FormGroup;
@Input() data: any;
@Output() output: EventEmitter<any> = new EventEmitter();
@Input() errors: any = {};
@Input() allowEdit;
constraints: any = [];
selectOne = [
{
value: '',
description: 'Select One...',
},
];
bool = [
...this.selectOne,
{
description: 'Yes',
value: true,
},
{
description: 'No',
value: false,
},
];
activitySectors = [
...this.selectOne,
{
value: 'industry',
description: 'Industry',
},
...
// (Remaining code not included for brevity)
<form [formGroup]="form">
<s-row class="pad-all-none" *ngFor="let row of rows" formGroupName="constraint">
<s-col span="4" *ngFor="let const of row">
<fieldset>
<label [for]="const.key" i18n>{{ const.label }}</label>
<input
[type]="const.type"
[placeholder]="const.label"
[formControlName]="const.key"
[id]="const.key"
*ngIf="const.type === 'text' || const.type === 'number'"
[attr.disabled]="!allowEdit ? '' : null"
/>
<select
[id]="const.key"
[formControlName]="const.key"
*ngIf="const.type === 'select'"
[attr.disabled]="!allowEdit ? '' : null"
>
<option *ngFor="let option of const.options" value="{{ option?.value }}">
{{ option.description }}
</option>
</select>
<kendo-multiselect
[data]="const.options"
[textField]="'description'"
[valueField]="'value'"
[id]="const.key"
[formControlName]="const.key"
[filterable]="true"
[placeholder]="'Select Multiple'"
*ngIf="const.type === 'multiple'"
[attr.disabled]="!allowEdit ? '' : null"
>
</kendo-multiselect>
</fieldset>
</s-col>
</s-row>
</form>
I am looking for suggestions on how to implement i18n in this scenario. Any advice would be greatly appreciated.
Thank you. Lucas.