Setting up edit page

Ionic Framework ionic-v3
1

A user can create a language and they can also edit the language.

Example Language Object

export interface Language {
    id?: String;
    name?: string;
    code?: string;
    native?: string;
    level?: number;
    type?: string;
}

The language master, show a list of there stored languages, when the edit button next to a language is selected it runs the below function passing in the entire language object.

language-master.ts

    editItem(language, type) {

        let l = language;
        l.type = type;

        let addModal = this.modalCtrl.create(LanguageEditPage, l);
        addModal.onDidDismiss(data => {
            this.getUser();
        });
        addModal.present();

    }

This is my issue

When the edit page is loaded i look for the language in the nav params and set all the fields one by one, including the form fields. So the edit page is valid when initially loaded. This seems a lengthy especially when there are many fields, is there a more efficient approach?

language-edit.ts

    language: Language = {};
    form: FormGroup;

constructor(public navCtrl: NavController,
                public navParams: NavParams,
                public modalCtrl: ModalController,
                public viewCtrl: ViewController,
                public auth: Auth,
                public user: User,
                public formBuilder: FormBuilder,
                public toastCtrl: ToastController) {


        this.form = this.formBuilder.group({
            type: ['', Validators.required],
            level: ['', Validators.required],
            code: ['', Validators.required],
            name: ['', Validators.required],
            native: ['', Validators.required],

        });

        if (this.navParams.data) {
            this.language.code = this.navParams.get('code');
            this.language.name = this.navParams.get('name');
            this.language.native = this.navParams.get('native');
            this.language.type = this.navParams.get('type');
            this.language.level = this.navParams.get('level');
            this.language.id = this.navParams.get('_id');

            this.form.patchValue({'code': this.language.code});
            this.form.patchValue({'name': this.language.name});
            this.form.patchValue({'native': this.language.native});
            this.form.patchValue({'type': this.language.type});
            this.form.patchValue({'level': this.language.level});
        }
        this.form.valueChanges.subscribe((v) => {
            this.isReadyToSave = this.form.valid;
        });

    }
2

I’m not sure if you would consider this much of an improvement, but you could do this, passing the language as a part of the NavParams as opposed to the whole thing:

this.language = navParams.get('language') || {};
this.form = formBuilder.group({
  type: [this.language.type, Validators.required],
  level: [this.language.level, Validators.required],
  code: [this.language.code, Validators.required],
  name: [this.language.name, Validators.required],
  native: [this.language.native, Validators.required],
});
3

Can you pass an entire object in the nav param? didint seem to work for me before

4

Docs say so.