CODEWITHSUNDEEP
angular
mano manoj
mano manoj

Reputation: 245

formControlName to be used for div

This is my reactive form object

    this.form = this.formBuilder.group({
        ordSearch: ['', Validators.required],
        fromDate: ['', Validators.required],
        toDate: ['', Validators.required],
        systemId: ['', Validators.required],
        entityId: ['', Validators.required],
        pmntMethod: ['', Validators.required],
        merchantId: ['', Validators.required],
        ordStatus: ['', Validators.required],
        refNumber: ['', Validators.required],
        ordId: ['', Validators.required],
        orderDate: ['', Validators.required],
        merchId: ['', Validators.required],
        paymentMtd: ['', Validators.required],
        authAmnt: ['', Validators.required],
        accIdentifier: ['', Validators.required],
        capAmnt: ['', Validators.required],
        expDate: ['', Validators.required],
        refAmnt: ['', Validators.required]
    });

This is my Html

<div class="col-md-6 orderKey">Order ID </div>
<div class="col-md-6" formControlName="ordId"></div>

I have to bind the ordId value to the div. But formControlName can`t be used for div. It is giving error ERROR Error: No value accessor for form control with name: 'ordId'

Upvotes: 1

Views: 10786

Answers (2)

Dasha
Dasha

Reputation: 775

Form controls are meant for editing data, so angular knows how to use them with html elements like <input>, <textarea> or <select>—elements that are used to edit data. <div> is a readonly element, usually there's no point in binding form controls to it.

You can also create your own custom components (or directives) that can be bound to form controls—if they implement ControlValueAccessor interface. Angular has built-in ControlValueAccessor implementations for <input>, <textarea>, etc, but not for <div>.

However, it looks to me that you don't want to let the user change ordId, you just want to show it. So it doesn't have to be a part of your form. Store it in a separate variable and bind your <div> to it the usual way:

public orderId: number | null = null;

// After you get your response
this.orderId = response.ordId;

<div class="col-md-6 orderKey">Order ID </div>
<div class="col-md-6">{{orderId}}</div>

If, for some reason, you absolutely want it in your form, you can bind to the form control's value like so:

<div class="col-md-6 orderKey">Order ID </div>
<div class="col-md-6">{{form.controls.ordId.value}}</div>

Upvotes: 3

Sachila Ranawaka
Sachila Ranawaka

Reputation: 41417

You should use the formControlName on a input instead of a div. But if you insist on using it on a div then you have to implement the ControlValueAccessor

Upvotes: 0

Related Questions