Controls Accessor Component
This feature is introduced in Magic xpa to gain better control on the Form controls from the html file. It enables you to implement easy validation for Form controls in html.
The new helper component file (<component name>.mg.controls.g.ts) will contain an enum of all the control names used on the form. The file will contain variables that provides access to each of the control in the enum. A variable for each Form control will be created, so they can be accessed easier in html.
Generating Controls Accessor Component for Projects already Generated in Versions Older than 4.6
"@magic-xpa/angular": "4.6.0"
"@magic-xpa/cli": "^4.6.0"
-
Perform npm install
-
Generate Controls Accessors files for each Web Client program by parking on its default form and activating menu option Web > Generate Controls Accessor.
-
Add the following lines in <component name>.component.ts file by replacing appropriate values at <component name>:
|
import {
TaskBaseMagicComponent,
} from "@magic-xpa/angular";
import {
FormGroup
} from "@angular/forms";
import {
MgFormControlsAccessor,
MgControlName
} from "./<component name>.mg.controls.g";
@Component({
.
.
.
})
export class <component name> extends BaseMatTableMagicComponent {
mgNames = MgControlName;
mgfc: MgFormControlsAccessor;
createFormControlsAccessor(formGroup: FormGroup) {
this.mgfc = new MgFormControlsAccessor(formGroup, this.magicServices);
}
.
.
.
}
|
Since version: 4.6
