Angular 里使用嵌套 Form 的步骤

简介: Angular 里使用嵌套 Form 的步骤

我们可以在这个 FormGroup 构造函数的属性里,再增添一个类型为 FormGroup 的实例,形成嵌套的 form:

每一次显式调用 new 创建 FormGroupFormControl 实例显得很繁琐。其实我们可以使用 FormBuilder 通过工厂模式创建。

profileForm = this.fb.group({
    firstName: ['Jerry'],
    lastName: ['LastName'],
    address: this.fb.group({
      street: [''],
      city: ['']
    }),
  });

效果:

冒号后面的参数类型是 JSON 数组,第一个参参数为默认的初始值,第二个参数为 validator,使用例子如下:

lastName 没有维护值时,整个 form 处于 ng-invalid 状态,submit 按钮无法点击。

嵌套 group 的 status 状态会冒泡到父 form.

可以通过 FormGroup.status 直接访问其状态。

this.profileForm.valueChanges.subscribe(
      value => {
        console.log('group value: ', value, ' status: ', 
        this.profileForm.status);
      }
    );

如果我们事先不知道待创建的 form 控件实例的准确数目,使用动态控件是一个不错的选择。所谓动态控件,即我们不需要为每一个控件显式指定 key.

一个实际例子:

aliases: this.fb.array([
    this.fb.control('')
  ])

创建一个 getter 访问器,通过代码的方式获得上图创建的动态控件:

get aliases() {
  return this.profileForm.get('aliases') as FormArray;
}

因为 this.profileForm.get('aliases') 返回的控件的类型是抽象数据类型

AbstractControl,所以你要为该方法提供一个显式的类型声明来访问 FormArray 特有的语法。

动态添加匿名组件 的方法:

addAlias() {
    this.aliases.push(this.fb.control(''));
  }

<div formArrayName="aliases">
        <h2>Aliases</h2>
        <button (click)="addAlias()" type="button">+ Add another alias</button>
        <div *ngFor="let alias of aliases.controls; let i=index">
          <!-- The repeated alias template -->
          <label for="alias-{{ i }}">Alias:</label>
          <input id="alias-{{ i }}" type="text" [formControlName]="i">
        </div>
      </div>

最后的效果:

这些匿名控件的值,通过如下方式打印出来:

onSubmit(){
    console.warn(this.profileForm.value);
  }

通过 formArrayNameformControlName 给这些匿名控件赋予了索引值,这样可以通过索引访问控件中的内容:

相关文章
|
3月前
几个经常用到的angular路由Router、ActivatedRoute 知识点:嵌套路由、路由跳转、路由传参、路由参数获取
几个经常用到的angular路由Router、ActivatedRoute 知识点:嵌套路由、路由跳转、路由传参、路由参数获取
几个经常用到的angular路由Router、ActivatedRoute 知识点:嵌套路由、路由跳转、路由传参、路由参数获取
|
JavaScript 前端开发 API
让Angular自定义组件支持form表单验证
让Angular自定义组件支持form表单验证
142 0
|
JSON 数据格式 索引
Angular 里使用嵌套 Form 的步骤
Angular 里使用嵌套 Form 的步骤
95 0
Angular 里使用嵌套 Form 的步骤
Angular最新教程-第十一节 路由四 (嵌套路由)
Angular最新教程-第十一节 路由四 (嵌套路由)
359 0
Angular最新教程-第十一节 路由四 (嵌套路由)
|
JavaScript 前端开发
angular ui-router:简单的单页面嵌套路由的实现过程
写在前面: ui-router是angular的一个插件,因为angular前面几个版本自带的原生ng-router不能很好的满足开发需求,所以在实现angular单页面嵌套的时候,都是使用ui-router。本文是的内容关于angular ui-router实现过程,内含demo以及代码地址,需要的朋友可以过来参考下,喜欢的可以点波赞,或者关注一下本人,ui-router的实现过程并不复杂,希望通过本文大家能够学会ui-router的使用方法。 ui-router与ng-router: UI-Router是angular原生ng-route进化版,相较与ng-router有如下两条优点:
374 0
angular ui-router:简单的单页面嵌套路由的实现过程
|
JavaScript
Angular Form (响应式Form) 学习笔记
Angular Form (响应式Form) 学习笔记
173 0
Angular Form (响应式Form) 学习笔记
Angular Reactive Form 的一个具体使用例子
Angular Reactive Form 的一个具体使用例子
Angular Reactive Form 的一个具体使用例子
|
JavaScript 测试技术 API
Angular form学习笔记:Angular两种实现form的方式
Angular form学习笔记:Angular两种实现form的方式
266 0
Angular form学习笔记:Angular两种实现form的方式