CODEWITHSUNDEEP
angularangular-reactive-forms
Garfieldos
Garfieldos

Reputation: 1

How to bind formControl value to a form input

I have angular component: 

import { Component, OnInit, Inject } from '@angular/core';

import {FormBuilder, FormGroup,Validators,FormArray,FormControl,} from '@angular/forms';

@Component({
    selector: 'app-collaborator-detail',
    template: `
    <h1> This is form</h1>
    <form [formGroup]="collaboratorForm">
    <div>
        <input type="text" placeholder="Email address" formControlName="emailAddress">
    </div>
</form>`,
})
export class CollaboratorDetailComponent implements OnInit {
    constructor(@Inject(FormBuilder) private fb: FormBuilder) {}

    collaboratorForm: FormGroup;

    ngOnInit() {
        this.initCollaboratorForm();
    }

    initCollaboratorForm() {
        this.collaboratorForm = this.fb.group({
            emailAddress: [
                { value: '[email protected]', disable: true },
                [Validators.email, Validators.required],
            ]
        });
    }
}

I expect, that value: "[email protected]" will be visible as a input value. But instead of it, visible value is: "[object Object]".

What I am doing wrong here?

Plunker urL: https://next.plnkr.co/edit/wu1ow98ai00gqJ4s

Upvotes: 0

Views: 443

Answers (1)

Nithya Rajan
Nithya Rajan

Reputation: 4884

There's no property called disable in the AbstractControl API (which is the base class for all the form controls), it should be disabled. 

{ value: '[email protected]', disabled: true }

Upvotes: 1

Related Questions