Example of Form Feilds

@Component({
template:



        



          

          

          



          

          



          

          

            

            

          



          

          

          



          {{appFrom.error}}

,
})
export class StudentComponent implements OnInit {

query$: Observable;
paxValidator: ValidatorOption;
showBrave = true;
braveOptions = [];

constructor() {

// this.query$ = this.qx.call(queryStr).pipe(
// map((result) => result?.data?.students[0]));
this.braveOptions = [
{ key: 'solid', value: 'Solid' },
{ key: 'great', value: 'Great' },
{ key: 'good', value: 'Good' },
{ key: 'unproven', value: 'Unproven' }];

}

ngOnInit(): void {

this.paxValidator = {
key: 'emailCompare',
validator: (c: FormGroup): ValidationErrors | null => {
const e1 = c.get('emailAddress').value || '';
const e2 = c.get('emailAddressConfirm').value || '';
if (e1 === '' || e2 === '') { return null; }
if (e1 !== e2) { return { error: true }; }
return null;
},
error: ' Emails to not match.'
};

}

onSubmit(value) {
// if (this.validate()) {
// this.payLoad = JSON.stringify(this.form.getRawValue());
// }
}

showBraveChange(value) {
this.showBrave = !this.showBrave;
}

}

Example of Custom Field Component

@Component({
selector: 'app-custom-field',
template:



      

        {{label}}



        

                  [ngClass]="{'is-invalid': error }" [attr.readOnly]="readonly?'':null" [attr.disabled]="disabled?'':null"

          (blur)="blur()" [id]="guid" type="text" placeholder="{{placeHolder || label}}">



        {{error}}

})
export class MyFieldComponent extends FieldComponent {

constructor(
@SkipSelf() formComponent: FormComponent,
@Optional() @SkipSelf() fieldGroupComponent: FieldGroupComponent) {
super(formComponent, fieldGroupComponent);
}

}

Using Custom component

Example of Form Feilds

;
paxValidator: ValidatorOption;
showBrave = true;
braveOptions = [];

constructor() {

// this.query$ = this.qx.call(queryStr).pipe(
// map((result) => result?.data?.students[0]));
this.braveOptions = [
{ key: 'solid', value: 'Solid' },
{ key: 'great', value: 'Great' },
{ key: 'good', value: 'Good' },
{ key: 'unproven', value: 'Unproven' }];

}

ngOnInit(): void {

this.paxValidator = {
key: 'emailCompare',
validator: (c: FormGroup): ValidationErrors | null => {
const e1 = c.get('emailAddress').value || '';
const e2 = c.get('emailAddressConfirm').value || '';
if (e1 === '' || e2 === '') { return null; }
if (e1 !== e2) { return { error: true }; }
return null;
},
error: ' Emails to not match.'
};

}

onSubmit(value) {
// if (this.validate()) {
// this.payLoad = JSON.stringify(this.form.getRawValue());
// }
}

showBraveChange(value) {
this.showBrave = !this.showBrave;
}

}

Example of Custom Field Component

@Component({
selector: 'app-custom-field',
template:



      

        {{label}}



        

                  [ngClass]="{'is-invalid': error }" [attr.readOnly]="readonly?'':null" [attr.disabled]="disabled?'':null"

          (blur)="blur()" [id]="guid" type="text" placeholder="{{placeHolder || label}}">



        {{error}}

ngx-form-fields

Example of Form Feilds

Example of Custom Field Component

Using Custom component

ngx-form-fields

Example of Form Feilds

Example of Custom Field Component

Using Custom component