i have a form with single field with name when i submit the form the output is not showing with respect to the model.ts

Question

i have a form with single field with name when i submit the form the output is not showing with respect to the model.ts and also the name is creating another object with in it

i have a notes on selecting individual note showing the output in console

Notes {name: "This Notes is related to the thing Dummy Content", createdOn: Tue Nov 19 2019 14:07:07 GMT+0530 (India Standard Time), modifiedOn: Tue Nov 19 2019 14:07:07 GMT+0530 (India Standard Time)}

but when i tried creating/editing a note this is my output in console and in DOM the name field is displaying [object Object]

{name: {…}, createdOn: Tue Nov 19 2019 14:09:20 GMT+0530 (India Standard Time), modifiedOn: Tue Nov 19 2019 14:09:20 GMT+0530 (India Standard Time)}
createdOn: Tue Nov 19 2019 14:09:20 GMT+0530 (India Standard Time) {}
modifiedOn: Tue Nov 19 2019 14:09:20 GMT+0530 (India Standard Time) {}
name:
name: "This Notes is related to the thing Dummy Content hfh kha kahf"
__proto__: Object
__proto__: Object

now how to get that even after adding/editing like Notes {name: "This Notes is related to the thing Dummy Content edited", createdOn: Tue Nov 19 2019 14:07:07 GMT+0530 (India Standard Time), modifiedOn: Tue Nov 19 2019 14:07:07 GMT+0530 (India Standard Time)}

.ts file

export class NoteEditComponent implements OnInit {
  public notes:Notes
  public editMode: boolean = false;
  public id: number;

  public createdOn:Date;
  public modifiedOn:Date;

  noteEditForm: FormGroup;

  constructor(private noteService:NotesService, private route:ActivatedRoute, private router:Router, private dataService:DataService) { }

  ngOnInit() {
    this.route.params.subscribe((params: Params) => {
      this.id = +params['id']
      this.editMode = params['id'] != null
      this.initializeForm()
    })
  }

  initializeForm(){
    let noteName = '';
    if(this.editMode){
      const note = this.noteService.getNoteById(this.id)
      noteName = note.name      
      console.log(note)
    }
    this.noteEditForm = new FormGroup({
      'name': new FormControl(noteName)
    })
  }

  onSubmit(){
    if(this.editMode){
      // this.noteService.editNote(this.id, this.noteEditForm.value)
      this.noteService.editNote(this.id,{name: this.noteEditForm.value, createdOn: new Date(),modifiedOn:new Date()})

    }else{
      // this.noteService.addNewNote(this.noteEditForm.value)
      this.noteService.addNewNote({name: this.noteEditForm.value, createdOn: new Date(),modifiedOn:new Date()})
    }
    this.onCancel()
  }

  onCancel(){
    this.router.navigate(['../'],{relativeTo:this.route})
  }

}

.html

<div class="container">
  <div class="row">
    <form [formGroup]="noteEditForm" (submit)="onSubmit()">

      <div class="row">
        <div class="form-group p-3">
          <label for="name">Note Text :</label>
          <textarea  class="form-control" formControlName="name" cols="100" rows="10"></textarea>
        </div>
      </div>

      <div class="row justify-content-end">
        <button class="btn btn-success mx-2" type="submit">Save &#10003;</button>
        <button class="btn btn-danger" type="button" (click)="onCancel()">Cancel &#10005;</button>
      </div>

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

Hi, what is the return type of this.noteService.getNoteById(this.id) ? is it an observable ? — Bilel-Zheni
– Bilel-Zheni, Commented Nov 19, 2019 at 8:53
this.noteEditForm.value should be replaced by this.noteEditForm.controls['name'].value — dileepkumar jami
– dileepkumar jami, Commented Nov 19, 2019 at 8:56

Meyyappan Subramaniyan · Accepted Answer · 2019-11-19 08:55:55Z

2

In the onSubmit function of your ts file, you have used like this.

name: this.noteEditForm.value

this.nodeEditForm.value will provide you the value of ngForm.

Instead, you have to fetch the formControl Value,

this.noteEditForm.get('name').value;

answered Nov 19, 2019 at 8:55

Meyyappan Subramaniyan

3631 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

i have a form with single field with name when i submit the form the output is not showing with respect to the model.ts

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related