CODEWITHSUNDEEP
angular
user2180794
user2180794

Reputation: 1445

Angular2 - Click to edit form fields

I have a form which pulls data from a service and displays it as follows 

@Component({
    selector: 'profile',
    template: `<h1>Profile Page</h1>
    <form [ngFormModel]="myForm" (ngSubmit)="onSubmit()" #f="ngForm">
    <div *ngFor="#prof of profileObject">
        <label from="name">Name</label>
        <input [ngFormControl]="myForm.controls['name'] "type="text" id="name" #name="ngForm" [(ngModel)]="prof.userFirstName">
    </div>
    <button name="submit" type="submit">submit</button>
    </form>

    <a [routerLink]="['../Dashboard']">Back to Dash</a>
    `,
    directives: [ROUTER_DIRECTIVES]
})

export class ProfileComponent implements OnInit {
    myForm: ControlGroup;
    userEmail = JSON.parse(localStorage.getItem('profile'));
    public profileObject: Object[];


    constructor(private fb: FormBuilder, private apartmentService: ApartmentService) {
        this.apartmentService = apartmentService;
    }


    onSubmit(form) {
        console.log(this.myForm);
        //post to rest API
    };

    ngOnInit(): any {
        this.apartmentService.getProfile(this.userEmail.email).subscribe(res => this.profileObject = res);
        this.myForm = this.fb.group({
            'name': ['', Validators.required],
        });
    }
}

When the component loads the template displays the data pre-populated in input text.

How can I display data in labels, and change it to input text on user click? basically want to implement click to edit functionality in the form

Upvotes: 2

Views: 11462

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657268

You can use *ngIf to switch between two views:

    <label *ngIf="!isEdit" (click)="isEdit=true" from="name">Name</label>
    <input *ngIf="isEdit" (keydown.enter)="isEdit=false" 
        [ngFormControl]="myForm.controls['name'] "type="text" 
        id="name" #name="ngForm" [(ngModel)]="prof.userFirstName">

Upvotes: 10

Related Questions