How do I remove elements from a HTML DOM View with NgIf using Typescript, not html? Looking for similar syntax.
Prefer to iterate through an Array in typescript, and remove items from the view, rather than wrapping all 20 formcontrols with NgIf, seems kind of repetitive.
Currently using Formbuilder, not FormArray. This link places style display none, which is not ideal practice in Angular from what I read. Is that true?
Angular 2 -> how to hide controls using FormGroup
We have exclusion array, and prefer to disable with foreach in Typescript
Maybe something like this?
This only disables the field, still shows in html View
Object.keys(this.customerForm.controls).forEach(key => {
if (this.excludeFormControlArray.indexOf(key) >= 0) {
this.customerForm.get(key).disable; // This only disables the field, still shows in html View
this.customerForm = this.formBuilder.group({
'firstName': [null, [Validators.maxLength(50), PhoneNumberValidator]],
'phoneNumber': [null, [Validators.maxLength(50), PhoneNumberValidator]],
'streetName': [null, [Validators.maxLength(50), PhoneNumberValidator]],
'emailAddress': [null, [Validators.maxLength(50), Validators.email]],
'city': [null, [Validators.required, Validators.maxLength(200)]],
'state': [null, [Validators.maxLength(200)]],
'zip':[null,[Validators.maxLength(200)]]
});
HTML
//trying to prevent wrapping each with ngIf, items are placed in special ,location on page, due to UX wireframe specs, NgFor was not entirely possible, html/css view is lot more complicated than this,
<div class = "row">
<app-input-textbox formControlName = "firstName"></app-input-textbox>
<div class = "row">
<div class = "column">
<app-input-textbox formControlName = "emailAddress"></app-input-textbox>
</div>
<div class = "test">
<app-input-textbox formControlName = "state"></app-input-textbox>
<app-input-textbox formControlName = "zip"></app-input-textbox>
</div>
from Toggle FormControl in View with Formbuilder Typescript using Angular 8
No comments:
Post a Comment