formControlName to be used for div

Question

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'

Why you trying set `formControlName` to div instead of input, select etc.? — Buczkowski, Jun 22 '18 at 12:40
That data I`m getting from API response, which has to be bind in div. — mano manoj, Jun 22 '18 at 12:42

score 3 · Answer 1 · answered Jun 05 '19 at 18:12

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>

score 0 · Answer 2 · answered Jun 22 '18 at 12:41

0

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

answered Jun 22 '18 at 12:41

Sachila Ranawaka

39,756
7
56
80

can you tell me how to change my html because data I`m getting from API response, which has to be bind in div. – mano manoj Jun 22 '18 at 12:44
https://stackoverflow.com/questions/45659742/angular4-no-value-accessor-for-form-control?answertab=active#tab-top – Sachila Ranawaka Jun 22 '18 at 12:45
Youar answer is right here: https://stackoverflow.com/a/45660571/9386929 – nircraft Nov 08 '18 at 14:40

formControlName to be used for div

2 Answers2

Linked