To tackle this issue, a recommended approach is to store additional data in a ViewModel property and regularly update them as the input values change...
interface IFormData: {
[controlName: string]: {
value?: string;
type?: string;
unit?: string;
}
}
@Component(...)
export class YourComponent implements OnInit, OnDestroy {
control1Subscription: Subscription;
data: IFormData = {
controlName1: {},
controlName2: {},
};
form: FormGroup;
serviceData;
constructor (
formBuilder: FormBuilder;
)
ngOnInit(): void {
// Retrieve your service data here. Assuming it's readily available
this.form = this.formBuilder.group({
controlName1 : new FormControl(''),
controlName2 : new FormControl(''),
});
// Upon each input value alteration, fetch the related information
this.control1Subscription = this.form.get('controlName1').valueChanges.subscribe(value => {
const data = this.serviceData.find(data => data.ctrlname === 'controlName1');
this.data['controlName1'].value = value;
this.data['controlName1'].type = data.type;
this.data['controlName1'].unit = data.unit;
});
}
ngOnDestroy(): void {
this.control1Subscription.unsubscribe();
}
}
You can create these subscriptions for input value changes using a loop, replacing the fixed ctrlname values with those from your dataset, adapting to your specific requirements.
Subsequently, when you need to access each set of values by referencing objects through keys, you benefit from constant-time lookup efficiency, enabling swift retrieval.