首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

ngOnInit上的Angular FormArray返回null

在Angular中,ngOnInit是一个生命周期钩子函数,用于在组件初始化时执行一些初始化操作。FormArray是Angular中的一个表单控件,用于处理表单中的数组数据。

当在ngOnInit上使用Angular的FormBuilder创建一个FormArray时,如果FormArray没有任何初始值或者没有添加任何表单控件,那么它会返回null。

FormArray通常用于处理动态添加或删除表单控件的情况,例如一个可变长度的表单字段列表。在ngOnInit中,我们可以使用FormBuilder创建一个FormArray,并为其设置初始值或添加初始的表单控件。

以下是一个示例代码,演示在ngOnInit中创建一个带有初始值的FormArray:

代码语言:txt
复制
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit {
  myForm: FormGroup;

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.myForm = this.formBuilder.group({
      myArray: this.formBuilder.array(['initialValue1', 'initialValue2'])
    });

    console.log(this.myForm.get('myArray').value); // 输出:['initialValue1', 'initialValue2']
  }
}

上述示例中,我们通过FormBuilder创建了一个名为myArray的FormArray,并为其设置了初始值为['initialValue1', 'initialValue2']。我们可以通过myForm.get('myArray').value来获取该FormArray的值。

在Angular中,FormBuilder是一个辅助类,用于简化表单的创建和管理。使用FormBuilder可以创建FormGroups、FormControls和FormArrays,并为其设置初始值、验证规则等。

对于上述问题中涉及到的FormArray的用法和具体实现,我推荐参考腾讯云的Angular相关文档和示例代码:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angular 从入坑到挖坑 - 表单控件概览

4.2.3、数据有效性验证 某些时候需要对于用户输入信息做有效性验证,此时可以在控件添加上原生 HTML 表单验证器来设定验证条件,当表单控件数据发生变化时,angular 会通过指令方式对数据进行验证...(): void { } } 在验证方法中,当数据有效时,返回 null,当数据无效时,则会返回一个对象信息,这里 nameinvalid 就是我们在模板中获取到错误信息 key 值 <div...在模板驱动表单中,因为不是直接使用 FormControl 实例,因此这里应该在模板添加一个自定义指令来完成对于控件数据校验 使用 angular cli 创建一个用来进行表单验证指令 ng...{ 'nameInvalid': true } : null; } } 当实现了继承 validate 方法后,就可以在模板控件添加该指令 ...因此这里验证方法需要在定义控件组时作为 FormGroup 参数传入 与单个字段验证方式相似,通过实现 ValidatorFn 接口,当表单数据有效时,它返回一个 null,否则返回 ValidationErrors

18.9K20
  • Microsoftthrifty:RPC方法返回NULL异常处理

    https://blog.csdn.net/10km/article/details/86244875 我们知道:thrift框架是不允许返回值为null,如果返回值为null,client...端会抛出异常,我在之前用facebook/swift框架时就遇到了这个问题,这是当时解决问题记录《thrift:返回null解决办法》,现在使用Microsoft/thrifty框架实现客户端同样也存在这个问题...下面是thifty-compiler生成client端存根代码receive方法部分片段: @Override protected PersonBean receive(Protocol..., "Missing result"); } } } 可以看到,返回结果为null时,会抛出类型为MISSING_RESULTThriftException异常。...null时抛出ThriftException异常会在这里被拦截发给callback对象 callback.onError(error); } };

    1.4K40

    Angular 组件通信

    这是我参与「掘金日新计划 · 4 月更文挑战」第8天。 一篇,我们讲了 Angular 结合 NG-ZORRO 快速开发。前端开发,很大程度上是组件化开发,永远离不开组件之间通信。...那么,在 Angular 开发中,其组件之间通信是怎么样呢? 举一反三,Vue 和 React 中大同小异 本文纯文字,比较枯燥。...: string; constructor() { } ngOnInit(): void { } } 子组件接受父组件传入变量 parentProp,回填到页面。 <!...public childSayHi(): void { console.log('Method: I am your child.') } } 我们在父组件设置子组件引用标识 #childComponent...所以在父子组件中,一进来就会打印 msg 初始值 null,然后过了一秒钟之后,就会打印更改值 Jimmy。同理,如果你在子组件中对服务信息,在子组件打印相关同时,在父组件也会打印。

    2K20

    Angular 从入坑到挖坑 - 组件食用指南

    ,可以通过 angular 内置模板语法与 html 元素进行结合,从而告诉 angular 如何根据我们应用逻辑和数据来渲染页面 4.1.2.1、插值表达式 插值表达式可以将组件中属性值或者是模板数据通过模板表达式运算符进行计算...没有可见副作用:模板表达式只作为数据展示,不应该改变任何数据;应该构建出幂等表达式,除非依赖值发生变化,否则多次调用时,应该返回相同数据信息 4.1.2.2、模板绑定语法 通过数据绑定机制...,可以使用管道对于表达式结果进行转换 管道是一种简单函数,它们接受输入值并返回转换后值。...安全导航运算符 在视图中使用属性值为 null or undefined 时,javascript 和 angular 会引发空指针异常并中断视图渲染过程, 从而视图会渲染失败,而使用了安全导航运算符...,当将属性赋值为 null,则会编译报错 ?

    15.8K30

    AngularDart4.0 英雄之旅-教程-06服务 顶

    现在,导入Hero和mockHeroes,并从getHeroes()方法返回模拟英雄:lib/src/hero_service.dart import 'package:angular/angular.dart...要用Angular调用getHeroes(),可以实现Angular ngOnInit生命周期钩子。 Angular为组件生命周期中关键时刻提供接口:创建,每次更改之后,最终销毁。...将OnInit添加到由AppComponent实现接口列表中,并使用里面的初始化逻辑编写一个ngOnInit()方法。 Angular会在正确时间调用它。...你正在模拟一个超快,零延迟服务器行为,通过返回一个模拟英雄立即可用Future。 将方法标记为async会自动将返回类型设置为Future。...heroes = await _heroService.getHeroes(); } Future 返回类型是异步void等价物。

    2.9K10

    Angular8稳定版修改概述

    所以基本你会有: ? 使用此功能将减小捆绑包大小。 ? 但这是如何工作? 基本Angular将使用polyfill构建其他文件,并且它们将注入nomodule 属性。...我认为这是gulp/grunt“旧时代”中命令。 基本,构建器只是一个带有一组命令函数,您可以createBuilder()从@angular-devkit/architect包传递给方法。...支持 Angular团队希望为使用AngularJS所有开发人员提供支持,并帮助他们升级到Angular。...中清除所有元素 以前要删除所有元素,formArray 我们必须循环删除第一个元素直到空: while(formArray.length){ formArray.removeAt(0); } 现在就不需要那样操作了...,直接使用clear方法就可以完成: formArray.clear() 对Typescript 3.4.x支持 Angular现在使用TypeScript 3.3(v7使用3.2.x)。

    4.5K20

    AngularDart 4.0 高级-生命周期钩子 顶

    例如,OnInit接口有一个名为ngOnInit钩子方法,Angular在创建组件后立即调用: lib/src/peek_a_boo_component.dart (ngOnInit) class PeekABoo...ngOnInitAngular首次显示数据绑定属性并设置指令/组件输入属性后,初始化指令/组件。 在第一次ngOnChanges之后调用一次。...添加一个英雄会产生一个新英雄。 间谍ngOnInit记录该事件。 重置按钮清除英雄列表。 Angular从DOM中移除所有英雄元素并同时销毁他们间谍指令。...当ngOninit运行时,它们将被设置。 ngOnChanges方法是您第一次访问这些属性机会。 在ngOnInit之前Angular会调用ngOnChanges ...并在此之后多次调用。...它只调用一次ngOnInit。 您可以期待Angular在创建组件后立即调用ngOnInit方法。 这就是深度初始化逻辑所属地方。

    6.2K10

    Rxjs&Angular-退订可观察对象n种方式

    原文/出处: RxJS & Angular — Unsubscribe Like a Pro 在angular项目中我们不可避免要使用RxJS可观察对象(Observables)来进行订阅(Subscribe...)和退订(Unsubscribe)操作; 概述 我们每个angular项目中都会用到RxJS, RxJS在我们angular app中对数据流和性能有非常大影响。...为了避免内存泄漏,在适当时机对可观察对象进行退订是非常重要; 本文会向你展示各种在angular组件中退订可观察对象方法!...getEmissions方法, 它接受一个scope参数来记录日志, 它返回值是一个会每秒发出 ${scope} Emission #n字符串可观察对象....OnInit, OnDestroy { emission: string; /* Note: we initialize to Subscription.EMPTY to avoid null

    1.2K00

    在 React 16 中从 setState 返回 null 妙用

    React 16 对状态性能进行了改进,如果新状态值与其现有值相同的话,通过在 setState 中返回 null 来防止来触发更新。 ?...解决方案 以下是我们将要遵循步骤,来防止不必要重新渲染: 检查新状态值是否与现有值相同 如果值相同,我们将返回 null 返回 null 将不会更新状态和触发组件重新渲染 首先,在 app 组件...然后检查 mocktail 状态新值是否与现有值相同。 如果值相同,setState 将返回 null。...我在下面的两个 GIF 中突出显示了 React DevTools 中更新: ? 没有从 setState 返回 null ?...从 setState 返回 null 之后 注意:我在这里换了一个深色主题,以便更容易观察到 React DOM 中更新。

    14.5K20

    angular面试题及答案_angular面试

    首次调用一定发生在ngOnInit前,值得注意是该方法仅限于对象引用发生变化时才会触发。...ngOninit:初始化指令或组件,在angular第一次显示展示组件绑定属性后调用,该方法只会调用一次 ngDocheck:检测 ngAfterContentInit:当把内容投影进组件之后调用,...此功能用于更改模板输出;比如将字符串更改为大写并在模板显示它。它还可以相应地更改日期格式。...当类被初始化之后,构造函数会被调用 ngOnInit ngOnInitangular中OnInit钩子实现,用来初始化组件。...ngOnInit : 在angular 第一次显示数据绑定和设置指令、组件输入属性之后,初始化指令、组件 所以从angular生命周期看,constructor是执行在先 所以既然ngOnchanges

    11.1K120

    Angular系列教程-第三节

    /video 创建类 1.3创建组件 ng generate component video/video 创建组件 2.TS数据类型 布尔值 数字 字符串 数组 元组 枚举 空值 Null...8.3列表组件实现 8.3.1模拟数据 8.3.2显示数据 8.3.3添加click事件 8.3.4详情区显示 8.3.5点击内容添加样式 8.4列表组件引入页面 9.组件生命周期 当 Angular...通过实现一个或多个 Angular core 库里定义生命周期钩子接口,开发者可以介入该生命周期中这些关键时刻 每个接口都有唯一一个钩子方法,它们名字是由接口名再加上 ng 前缀构成。...比如,OnInit 接口钩子方法叫做 ngOnInitAngular 在创建组件后立刻调用它 ngOnInit() 在 Angular 第一次显示数据绑定和设置指令/组件输入属性之后,初始化指令...ngOnDestroy() 每当 Angular 每次销毁指令/组件之前调用并清扫。 在这儿反订阅可观察对象和分离事件处理器,以防内存泄漏。 在 Angular 销毁指令/组件之前调用。

    1.5K20

    Angular2 -- 生命周期钩子

    比如,OnInit接口钩子方法叫做ngOnInit。 指令和组件 ngOnInit:当Angular初始化完成数据绑定输入属性后,用来初始化指令或者组件。...ngOnChanges:当Angular设置了一个被绑定输入属性后触发。该回调方法会收到一个包含当前值和原值changes对象。...ngAfterContentChecked:当Angular检查完那些投影到自己视图中外来内容数据绑定之后调用。 ngAfterViewInit:在Angular创建完组件视图后调用。...ngAfterViewChecked:在Angular检查完组件视图中绑定后调用。...生命周期顺序 ngOnChanges:当被绑定输入属性值发生变化时调用,首次调用一定会发生在ngOnInit之前。 ngOnInit:在第一轮ngOnChanges完成之后调用。

    77420
    领券