Within our Angular framework, we've implemented a form with 10 fields. However, a new requirement has surfaced where certain individuals only require access to specific fields out of the existing 10. To accommodate this, our team is currently addressing these needs by hiding fields and disabling Validators in both the TypeScript form and the HTML layout.
The query at hand is whether this approach aligns with best practices in Angular development. One alternative suggestion involves creating new form builder models that can be seamlessly swapped in and out of components. The concern lies in potentially cluttering the codebase by deactivating validators and toggling elements in the HTML file. Moreover, adding new fields down the line may complicate matters further if each field requires an individual toggle.
We're now questioning if this method adheres to official Angular documentation recommendations or if there exists a more efficient way to manage the situation rather than utilizing 10 boolean variables for each form control.
this.customerForm = this.formBuilder.group({
'customerName': [null, [Validators.maxLength(50)]],
'productBought': [null, [Validators.maxLength(50)]],
'streetNumber': [null, [Validators.required, Validators.maxLength(64)]],
'streetName': [null, [Validators.maxLength(8)]],
'city': [null, [Validators.maxLength(32)]],
'state': [null, [Validators.maxLength(16)]],
'postalCode': [null, [Validators.maxLength(16)]],
'postalCodeExtension': [null, [Validators.maxLength(50)]]
},
}
'city': [null, this.cityShow === true ? [Validators.required, Validators.maxLength(50)] : []],
<div class="parent" *ngIf="cityShow">
City:
<input formControlName = "city" class = "cityclass">
</input>
</div>