How to show value when user editing in form using angular

Question

I want to edit and show value in form when user editing please help me how to show value in angular.

edit-blog.component.ts

import { Component, OnInit } from '@angular/core';
import { Blog } from '../_models/blog';
import { UserService } from '../_services';
import { User } from '../_models'
import { Router } from '@angular/router';
import { AuthenticationServiceService } from '../_services';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { first } from 'rxjs/operators';
@Component({
  selector: 'app-edit-blog',
  templateUrl: './edit-blog.component.html',
  styleUrls: ['./edit-blog.component.css']
})
export class EditBlogComponent implements OnInit {
  editBlogForm: FormGroup;
  users: User[] = [];
  submitted = false;
  constructor(private router: Router,
    private formBuilder: FormBuilder,

    private authenticationService: AuthenticationServiceService,
    private userService: UserService) { }
    get f() { return this.editBlogForm.controls; }
  ngOnInit() {
    this.editBlogForm = this.formBuilder.group({
      title: [this.users, Validators.required],
      blog: [this.users, Validators.required],
    });
  }
  //get f() { return this.editBlogForm.controls; }
  editUserBlog(id:number) {
    this.userService.editUserBlog(id).pipe(first()).subscribe(users => {
      users = users;
      console.log(users);
    });

  }
  onSubmit(user: User) {
    this.userService.update(user).subscribe(user => {
      user = user;

    });
  }


}

And below is my edit-blog.componet.html i want to show value in this form plase help how to show value.

edit-blog.component.html

<div>
    <div class="container">
        <div class="row">

            <div class="col-sm-3">
            </div>
            <div class="col-sm-6" style="margin-top: 60px">
                <h2>Update your blog here..</h2>
                <form [formGroup]="editBlogForm" (ngSubmit)="onSubmit()">
                    <div class="form-group">
                        <input type="text" [(ngModel)]="users.title" formControlName="title" class="input" [ngClass]="{ 'is-invalid': submitted && f.title.errors }"
                            placeholder="Title" />
                        <div *ngIf="submitted && f.title.errors" class="invalid-feedback">
                            <div *ngIf="f.title.errors.required">Title is required</div>
                        </div>
                    </div>
                    <div class="form-group">

                        <app-ngx-editor type="text" formControlName="blog" height="250px" minHeight="50px" class=""
                            [placeholder]="'Enter text here...'" [spellcheck]="true" [ngClass]="htmlContent"></app-ngx-editor>
                        <div *ngIf="submitted && f.blog.errors" class="invalid-feedback">
                            <div *ngIf="f.blog.errors.required">Blog is required</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <button class="btn btn-primary">Update</button>

                    </div>
                </form>

            </div>

            <div class="col-sm-3">

            </div>

        </div>
    </div>
</div>

i do not get value when editing the form please help me how to show the value .thnk you in advance.

In Angular you choose if you want to use Reactive Form OR Template Driven Form. If you use Reactive Form, NOT use [(ngModel)], see the doc angular.io/guide/reactive-forms. Tip: if use ReactiveForm, you can write in your .html {{editFormGroup?.value|json}} to check the values — Eliseo
– Eliseo, Commented Jan 25, 2019 at 8:48
Your users variable is an array. And you are trying to use it as an object. — MonkeyScript
– MonkeyScript, Commented Jan 25, 2019 at 8:52

Benneee_ · Accepted Answer · 2019-01-25 09:42:54Z

First, here is a link to the angular docs concerning forms: Forms Overview in Angular

In Angular, there are two major methods of creating forms - Reactive approach and Template-driven approach. First thing is you have to decide which method you want to employ first.

The reactive method is a programmatic approach, your form is created in your .ts file and synchronised with the HTML form template with the application of directives such as formGroup (in the opening form tag) and formControlName attached to values you set for this in your .ts file and in their respective input tags.

The Template-driven approach is done mainly in your template i.e .html file.... In this case, the directive [ngModel] is used as the formControl and the html "name" attribute is present to help you track the form value in the form object on your console.

To show a preset value in your form however, kindly make up your mind about the approach you want to employ first. For TD Approach - Simply use the HTML attribute "value" and set it to your required value. e.g for username input; value="Benneee".... For Reactive approach - after declaring the FormGroup object's type, in the place of assigning the form object to its defined value and assigning the different formcontrol names, you can do something like this: "username": new FormControl("Benneee");

I hope this does help or at least points you in the right direction.

Benneee_ · Accepted Answer · 2019-01-25 09:49:17Z

1

One more thing, Dinesh:

On second thought, kindly read carefully through my first message and understand carefully, then I think you should just remove that ngModel directive in that HTML template to begin with.

Then in your .ts file, within your ngOnInit file, simply do this:

console.log('my form: ', this.editBlogForm)

That should solve this issue.

answered Jan 25, 2019 at 9:49

Benneee_

3291 silver badge7 bronze badges

Collectives™ on Stack Overflow

How to show value when user editing in form using angular

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related