{
key: 'skewNumber',
type: '#custom-input',
className: 'col-6',
props: {
type: 'number',
label: 'No. of skew :',
placeholder: 'No. of skew',
required: true,
},
expressions: {
hide: "!(model.isStructSkew ==='Yes')",
},
hooks: {
onInit: (field: FormlyFieldConfig) => {
return field.formControl?.valueChanges.pipe(
startWith(field.formControl?.value),
filter((v) => v > 0),
tap((value) => {
if (this.model.skewAngle.length !== value) {
this.model.skewAngle.length = value;
this.model = { ...this.model, skewNumber: value };
}
})
);
},
},
},
{
key: 'skewAngle',
type: 'repeat',
fieldArray: {
type: 'input',
key: 'skewAngleDegree',
props: {
label: 'Skew Angle',
required: true,
},
},
},
],
},
Repeat Compoent template :-
template: ` <div class="row">
<div *ngFor="let f of field.fieldGroup; let i = index" class="col-sm-4 col-md-3 col-6">
<formly-field [field]="f" ></formly-field>
</div>
</div>`,
})
export class RepeatTypeComponent extends FieldArrayType {}
I am trying to generate multiple input fields based on the skewNumber value and fields are generating as expected, But I want a way to change the labels of those generated fields
currently every field that is being generated is having same label name which is Skew Angle but I want something like this :- Skew Angle 1, Skew Angle 2 , Skew Angle 3 based on the number input skewNumber.
Can anyone help me with this? If possible try out the similar code in stackblitz and post the answer here. Thank You.
https://stackblitz.com/edit/angular-wj7prg?file=src%2Fapp%2Fapp.component.ts