角度2中更新表单的最佳实践

Question

我在angular2中创建了我的第一个应用程序，并且在使用formBuilder 的第一个实体更新表单时遇到了困境。 我做了一个工作表，但仍然不确定它是否符合最佳实践。

我的对象来自mongoDb集合。具有两个简单文本属性的对象费用。

这是我在控制器中做的事情。

import {Component, View} from 'angular2/core';

import {RouteParams} from 'angular2/router';

import {Expenses} from 'collections/expenses';

import {RouterLink} from 'angular2/router';

import {Router} from 'angular2/router';

import {FormBuilder, Control, ControlGroup, Validators} from 'angular2/common';

@Component({
    selector: 'expense-details'
})
@View({
    templateUrl: '/client/expense-details/expense-details.html',
    directives: [RouterLink]
})
export class ExpenseDetails {
    expenseForm:ControlGroup;
    expenseId;


    constructor(params: RouteParams, private router: Router) {
        this.expenseId= params.get('expenseId');
        var expense = Expenses.findOne(this.expenseId);

        var fb = new FormBuilder();
        this.expenseForm = fb.group({
            label:[expense.label, Validators.required],
            description:[expense.description]
        })
    }

    saveExpense(expense){
        console.log(this.expenseForm.valid);
        console.log(expense);
        if(this.expenseForm.valid){
            Expenses.update(this.expenseId, {
                $set:{
                    label:expense.label,
                    description:expense.description
                }
            })
            this.router.navigate(['ExpensesList']);
        }
    }
}

这是正确的行为吗？

Answer 1

您将费用保存在只有构造函数知道的变量中，您应该将其设置为组件属性，以便您可以在save方法中访问它。

至于最佳实践，通常使用初始_来命名私有属性，例如private _router：Router，这样就可以轻松区分它们。

此外，自从测试版以来我还没有看到@View，他们总是在所有官方示例中的@Component标记中使用templateUrl，指令和所有这些属性。

你还需要绑定暴露的＆＃34;费用的属性＆＃34;使用ngModel的表单中的对象。

我不知道这是否是您希望的那种输入，我希望它有所帮助。