While using model driven approach in angular reactive forms, we might be in need to use the properties of base class into derived class.
Here is a way to access properties of base class into derived class and also hide the complexity of inherited classes.
Step 1:
Install @rxweb/reactive-form-validators
npm i @rxweb/reactive-form-validators
Step 2:
Suppose you are having two classes Product and Order, You want to use properties of Product into Order
import { prop } from "@rxweb/reactive-form-validators"
export class Product{
@prop()
productId:number;
@prop()
productName:string;
}
export class Order extends Product {
@prop()
orderId:number;
@prop()
orderType:string;
}
Step 3:
Create Component using formGroup method of RxFormBuilder to use the model Object
import { Component, OnInit } from '@angular/core';
import { FormGroup } from "@angular/forms"
import { RxFormBuilder } from '@rxweb/reactive-form-validators';
import { Order } from './order.model';
@Component({
selector: 'app-class-complete',
templateUrl: './class-complete.component.html'
})
export class ClassCompleteComponent implements OnInit {
userFormGroup: FormGroup
constructor(
private formBuilder: RxFormBuilder
) { }
ngOnInit() {
let order = new Order();
this.userFormGroup = this.formBuilder.formGroup(order);
}
}
Step 4:
Create form in component HTML
<form *ngIf="userFormGroup" [formGroup]="userFormGroup">
<div class="form-group">
<label>Product Id</label>
<input type="text" formControlName="productId" class="form-control" />
</div>
<div class="form-group">
<label>Product Name</label>
<input type="text" formControlName="productName" class="form-control" />
</div>
<div class="form-group">
<label>OrderId</label>
<input type="text" formControlName="orderId" class="form-control" />
</div>
<div class="form-group">
<label>Order Type</label>
<input type="text" formControlName="orderType" class="form-control" />
</div>
<button [disabled]="!userFormGroup.valid" class="btn btn-primary">Submit</button>
</form>
Here is the working example
In Case of query/suggestion, Please comment below
Top comments (0)