2

我正在 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']);
        }
    }
}

这是正确的行为吗？

4

1 回答 1

1

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

至于最佳实践，使用首字母 _ 命名私有属性只是一种常见的做法，例如私有 _router:Router，这样您就可以轻松区分它们。

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

您还需要使用 ngModel 在表单中绑定您公开的“费用”对象的属性。

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

于 2016-01-10T01:50:13.347 回答