CODEWITHSUNDEEP
angularangular6angular-reactive-forms
yul gurz
yul gurz

Reputation: 83

Using ReactiveForms, how to set value in HTML angular 6

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>

Upvotes: 1

Views: 1703

Answers (3)

Mustafa Kunwa
Mustafa Kunwa

Reputation: 867

You can use formname.setValue({})

Upvotes: 1

Andrew Allen
Andrew Allen

Reputation: 8002

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.

Upvotes: 3

Giovani Vercauteren
Giovani Vercauteren

Reputation: 1908

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)
}

Upvotes: 0

Related Questions