小编Joh*_*hna的帖子

我未能让 Angular 2 反应式表单工作，其中FormGroup 嵌套在FormArray 中。有人可以告诉我我的设置有什么问题吗？

为简洁起见，省略了代码中不相关的部分。

以下是我的组件

orderForm: FormGroup = this.fb.group({
    id: [''],
    store: ['', Validators.required],

    //The part related to the error
    order_lines: this.fb.array([
        this.fb.group({
           id: [''],
           order_id: [],
           product_id: [],
           description: ['', Validators.required],
           unit_price: ['', Validators.required],
           discount: [0],
           units: [1, Validators.required],
           line_total: ['', Validators.required]
        })
    ])
});

constructor(private fb: FormBuilder) {  }

//Order instance is passed from elsewhere in the code
select(order: Order): void {
    this.orderForm.reset(order)
}

Order传递给select方法的实例是这样的：

  {
        "id": 20,
        "store": "Some Store", …

在我的Angular应用程序中，我使用HttpClient从服务器获取json数据。但是，我需要在客户端对返回的数据进行一些转换。

因此，我尝试使用以下代码片段将从服务器返回的A 型数组转换为B 型数组。

this.http.get<any[]>(this.env.accounts.url.accountTypes).pipe(map(e => {
    console.log(e); // print the retuned array not a single item
    return {'label': e.name, 'value': e.id}
  }
)).subscribe(data => {
  this.accountTypes = data;
  console.log(this.accountTypes); // prints {label: undefined, value: undefined}
});

我一定是做错了，但我无法弄清楚这里出了什么问题。

服务器返回一个数组，如：

[
  {name: "Name 1", id: 1},
  {name: "Name 2", id: 2},
  {name: "Name 3", id: 3},
]

我需要将其转换为以下格式

[
  {label: "Name 1", value: 1},
  {label: "Name 2", value: 2},
  {label: "Name …

我想将视图呈现给变量而不直接将其发送到浏览器.我曾经用cakephp2做过.*.但是,我无法弄清楚如何在CakePHP3中做到这一点.你能告诉我怎么做吗？

在我的 Angular(v7) 应用程序中，尽管浏览器地址栏中的 URL 已更改，但单击路由器链接不会加载相关组件。

重新加载页面后，单击浏览器的刷新按钮，路由器链接将开始按预期工作。我已在 Google Chrome 和 IE 中确认了该行为。

你能告诉我我做错了什么，在哪里？我在下面分享了我的代码的相关部分。

应用模块和路由器设置

import {
  RouterModule,
  Routes
} from "@angular/router";
...

const appRoutes: Routes = [{
    path: 'login',
    component: LoginComponent
  },
  {
    path: 'bookings', 
    component: BookingsComponent, 
    canActivate: [AuthGuard]}, 
  {
    path: 'rates', 
    component: RatesComponent, 
    canActivate: [AuthGuard]},
  {
    path: '',
    redirectTo: '/bookings',
    pathMatch: 'full',
    canActivate: [AuthGuard]
  },
  {
    path: '**',
    component: PageNotFoundComponent
  },
];

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes, {
      enableTracing: false
    }),
    BrowserModule,
    ...
  ]
})
export class AppModule {}

HTML 模板中的路由器链接 …

我正在尝试在我的 Vue.js 项目之一中使用Element-UI设计一些表单。单击提交按钮后，我想在继续任何进一步操作之前检查表单是否有效。

任何人都可以指导我如何引用 Vue 组件中的元素并检查其有效性的示例。

以下是我的表单设置。

 <div id="frmEventCreate">
 <el-form v-bind:model="data" v-bind:rules="rules">
    <el-form-item label="Event name" prop="name" required>
       <el-input v-model="data.name"></el-input>
    </el-form-item>

    <el-button type="success" v-on:click="next" icon="el-icon-arrow-right"> Next Step </el-button>
 </el-form>
 </div>

var objEvent = {neme: "Some Name"};
vmEventCreate = new Vue({
    el: '#frmEventCreate',
    data: {
        data: objEvent,
        rules: {
            name: [
                {required: true, message: 'Please input event name', trigger: 'blur'},
                {min: 10, max: 100, message: 'Length should be 10 to 100', trigger: 'blur'}
            ]
        },
    },
    methods: {
        next: function …