Skip to content

Instantly share code, notes, and snippets.

@mklickman
Created October 21, 2017 17:13
Show Gist options
  • Save mklickman/b22f04b2105fbe826c4b18af9220f706 to your computer and use it in GitHub Desktop.
Save mklickman/b22f04b2105fbe826c4b18af9220f706 to your computer and use it in GitHub Desktop.
Angular reactive form with conditionally pre-set data
import { Component, OnInit } from '@angular/core';
import { NavParams } from 'ionic-angular';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { StudentsProvider } from '../../../providers/students-provider';
@Component({
selector: 'student-form',
templateUrl: 'student-form.html'
})
export class StudentForm implements OnInit {
private studentId: number;
private student: any;
private studentForm: FormGroup;
constructor(
private studentsProvider: StudentsProvider,
private navParams: NavParams,
private fb: FormBuilder
) {}
ngOnInit() {
this.studentId = this.navParams.get('studentId');
this.student = this.studentId !== null ? this.studentsProvider.getStudent(this.studentId) : null;
this.studentForm = this.fb.group({
firstName: [''],
lastName: [''],
birthday: [''],
gradeLevel: [''],
schoolYear: ['']
});
if (typeof this.student !== undefined) {
this.studentForm.setValue({
firstName: this.student.firstName,
lastName: this.student.lastName,
birthday: this.student.birthday,
gradeLevel: this.student.gradeLevel,
schoolYear: this.student.schoolYear
});
}
}
}
import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';
@Injectable()
export class StudentsProvider {
private students: any[] = [
{
firstName: 'JC',
lastName: 'Denton',
birthday: '',
gradeLevel: '3rd',
schoolYear: '2016-2017'
},
{
firstName: 'Paul',
lastName: 'Denton',
birthday: '',
gradeLevel: '3rd',
schoolYear: '2016-2017'
},
{
firstName: 'Bob',
lastName: 'Page',
birthday: '',
gradeLevel: '3rd',
schoolYear: '2016-2017'
}
];
constructor() {
}
getStudents() {
return this.students;
}
getStudent(id) {
return this.students[id];
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment