Using ReactiveForms, how to set value in HTML angular 6

Question

I'm trying to set a value on my HTML. How do I achieve this? I'm using reactive forms on my typescript and have already tried [value]= "coursemodules.course.id" in my HTML but it does not seem to work. It does not retrieve it when I console.log() it.

component.ts

@Input() coursemodules: any = []

moduleForm = new FormGroup({
  class_id: new FormControl(''),
  coursemodule_title: new FormControl(''),
  coursemodule_course_id: new FormControl('')
});

constructor(private coursemoduleService: CoursemoduleapiService) {}

ngOnInit() {}

saveModuleForm() {
  console.log(this.moduleForm.value);
  this.coursemoduleService.createCourseModules(
    this.moduleForm.get('class_id').value,
    this.moduleForm.get('coursemodule_title').value,
    this.moduleForm.get('coursemodule_course_id').value).subscribe(
      result => console.log(result),
      error => console.log(error)
    );
}

HTML

<form [formGroup]="moduleForm" (ngSubmit)="saveModuleForm()">

    <div class="modal-body m-3">

        <div class="form-group">
            <label class="form-label">Class ID</label>
            <input formControlName="class_id" type="text" 
                   class="form-control"
                   placeholder="Class ID">
        </div>
        <div class="form-group">
            <label class="form-label">Module Title</label>
            <input formControlName="coursemodule_title" type="text" 
                   class="form-control" 
                   placeholder="Module Title">
        </div>
        <div class="form-group">
            <label class="form-label">Course ID</label>
            <input formControlName="coursemodule_course_id" type="text" 
                   class="form-control"
                   [value]="coursemodules.course.id">
        </div>

    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-success">Save changes</button>
    </div>
</form>

The first thing you do is assign an empty array coursemodules and then access it like you do an object. While JS will allow this, this isn't how you should work with arrays. — Giovani Vercauteren
– Giovani Vercauteren, Commented Oct 16, 2019 at 6:56

Andrew Allen · Accepted Answer · 2019-10-16 07:24:12Z

3

If you know coursemodules will be ready on OnInit you could do:

ngOnInit() {
    this.moduleForm.patchValue({
        coursemodule_course_id: this.coursemodules[0].course.id
    })
}

Alternatively, hook into ngOnChanges

ngOnChanges(changes: SimpleChanges): void {
    if (changes.coursemodules && changes.coursemodules.currentValue) {
        ...same as ngOnInit
    }
}

It should be noted when you do

class_id: new FormControl('')

you're giving the control value ''. You could do class_id: new FormControl(6) etc.

Don't use [value] alongside formControlName unless you know what your doing

Don't use the any type. Create interfaces e.g interface CourseModule and then:

@Input() coursemodules: CourseModule[] = []

This will correctly error on trying this.coursemodules.course.id.

answered Oct 16, 2019 at 7:24

Andrew Allen

8,1917 gold badges38 silver badges82 bronze badges

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

4 Comments

yul gurz Over a year ago

It works! But I'm getting this error TypeError: Cannot read property 'id' of undefined on my console. How to resolve this?

Andrew Allen Over a year ago

It means whichever line you're getting the TypeError error that this.coursemodules[0].course (or whatever you are trying to do .id on) is undefined.

yul gurz Over a year ago

This is my Course Models:

export interface Course { 	id: number; 	courseCode: string; 	courseName: string; 	courseDescription: string; 	course_created_by: string; 	course_date_created: Date; 	course_last_modified: Date;  }

. This is my CourseModule Models:

import { Course } from './Course';  export interface CourseModule {   id: number;   class_id: string;   coursemodule_title: string;   coursemodule_created_by: number;   course: {   	[key: string]: Course   } }

but now its saying Property 'course' does not exist on Type CourseModule: []

Andrew Allen Over a year ago

it may be worth asking as separate typescript question but I recommend logging coursemodules before the error to see what you can access and if it's defined and/or using a typescript playground

Mustafa Kunwa · Accepted Answer · 2019-10-16 07:37:19Z

1

You can use formname.setValue({})

edited Oct 16, 2019 at 7:37

answered Oct 16, 2019 at 6:46

Mustafa Kunwa

8651 gold badge9 silver badges20 bronze badges

Comments

Giovani Vercauteren · Accepted Answer · 2019-10-16 07:04:48Z

0

I recommend you remove the [value]="coursemodules.course.id" as it will not work with a reactive form. It might show in the form, but a reactive form maintains its own state/values for a form and by using [value] you bypass that. If you wish to assign an initial value to a form field you will have to do this in the controller and not in the template.

ngOnInit() {
    this.moduleForm.get('coursemodule_course_id').setValue(this.coursemodules.course.id)
}

answered Oct 16, 2019 at 7:04

Giovani Vercauteren

1,89816 silver badges23 bronze badges

Collectives™ on Stack Overflow

Using ReactiveForms, how to set value in HTML angular 6

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related