与正式工作-第二部分- 菠菜大平台-菠菜大平台

在第一部分在本系列中，我们介绍了Angular 冲突的基础知识. 在这里，我们将深入研究并揭示更多的概念.

布局在冲突

冲突库中的布局帮助我们设计具有现代美学的响应式表单.

我们必须使用 场GroupClass的名字 属性，并且必须分配类名. 然后在 场Group 我们还需要加上一个性质 类名称 (类名可以是任何名称，但应该传递命名约定)

formFields = [
{
场GroupClass的名字:“显示flex”
场Group:(
{
  名称:“flex-1”,
  类型:“输入”,
  templateOptions: {
     标签:“Workset名称”
   }
},
{
  名称:“flex-1”,
  类型:“选择”,
  templateOptions: {
     标签:“工作流”,
     options: [{id: 1, name: 'Workflow 1'}]
  }
},
{
  名称:“flex-1”,
  类型:“选择”,
  templateOptions: {
     标签:“过程”,
     options: [{id: 1, name: '进程1'}]
   }
}
......]
}
]随着冲突FieldConfig []

布局与flexbox

如果没有包装器类，所有的字段将一个显示在另一个的下面.

自定义模板

如上所述的第1部分，冲突支持多个预构建模板. 然而，我们也可以创建自定义模板.

首先，您必须创建一个表示扩展字段的组件 FieldType class.

从@angular/core中导入{Component};
import {FieldType} from ` @ngx-formly/core `;

@ component ({
选择器:“formly-custom-template-input-场”,
模板:
  
`,
})
导出类冲突CustomTemplateInputField扩展FieldType {}

中的自定义类型注册 NgModule 声明:

冲突Module.forRoot ({
 类型:[
   {name: 'input'， component: 冲突FieldInput}，
 ],
}),

类型允许你指定一个自定义类型，你可以在你的字段配置中使用，需要两个属性:

name:模板的名称
component:当这个类型被设置时form应该创建的组件

在表单配置中使用新创建的自定义类型:

字段:冲突FieldConfig[] = [
  {
    关键:“firstname”,
    类型:“输入”,
  },
];

在冲突中构建嵌套的表单

在某些情况下，我们需要嵌套表单. 要做到这一点，只需在字段配置中添加以下额外属性，

包装:(“委员会”),
templateOptions: {label: 'Address'}，
场Group ({}):

在哪里，包装器是一个面板. 下 templateOptions 我们必须给出一个标签名称，以便在面板上显示该名称. 最后一个属性是 场Group 在哪里我们可以添加很多字段.

钩子

为了定制表单控件在运行时的行为，冲突包含了一个叫做钩子的概念. 这些都是类型"冲突LifeCycleOptions，提供以下生命周期:

OnInit
onchange
doCheck
afterContentInit
afterContentChecked
afterViewInit
afterViewChecked
onDestroy

这是这些生命周期钩子的一个例子，

关键:“First的名字”,
钩子:{
      onInit: (场: 冲突FormField) {
          场.templateOptions.label = '输入姓名'
      }
}

当表单在视图中渲染时，我们初始化字段标签为“First的名字”, 在运行时，我们将显示标签为“输入名称”. 我们已经初始化的标签将不再显示在视图中. 因此，这意味着我们可以使用钩子控制任何字段的标签和值. 使用“RxJs”的操作也可以在form中使用.

关键:“cityId”,
选择:[]
钩子:{
      onInit: (场: 冲突FormField) {
          场.templateOptions.选择=字段.form.get(“stateId”).valueChanges.pipe(switchMap(nationId => this.名.getCities (stateId))
     )      
  }
}

这里，我们假设我们有一个状态列表，并基于所选 stateId 我们将把这些城市从美国过滤出来. 我们可以将过滤后的城市直接关联到选项数组.