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

FormControl在角度2中返回空值

FormControl 在 Angular 中是表单控件的一个抽象基类,用于表示表单中的一个控件,比如输入框、选择框等。当你在 Angular 应用中使用 FormControl 时,有时可能会遇到它返回空值的情况。这种情况可能由以下几个原因造成:

  1. 初始化问题:如果你没有正确地初始化 FormControl,它可能会返回空值。确保你在组件类中正确地创建了 FormControl 实例。
代码语言:txt
复制
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent {
  myControl = new FormControl(''); // 初始化 FormControl
}
  1. 绑定问题:如果你在模板中没有正确地绑定 FormControl 到表单元素,控件的值可能不会更新。
代码语言:txt
复制
<!-- example.component.html -->
<input [formControl]="myControl" />
  1. 异步数据问题:如果你的 FormControl 绑定的值依赖于异步操作(比如 HTTP 请求),在数据到达之前,FormControl 可能会返回空值。
代码语言:txt
复制
import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import { DataService } from './data.service';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {
  myControl = new FormControl('');

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.dataService.getData().subscribe(data => {
      this.myControl.setValue(data.value);
    });
  }
}
  1. 表单控件状态问题:如果表单控件的状态是 disabledpending,它可能不会返回最新的值。
代码语言:txt
复制
this.myControl.disable(); // 禁用控件
// 或者
this.myControl.markAsPending(); // 标记控件为 pending 状态
  1. 更新问题:如果你在更新 FormControl 的值后没有触发变更检测,Angular 可能不会更新视图。
代码语言:txt
复制
import { Component, ChangeDetectionStrategy } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush // 使用 OnPush 策略
})
export class ExampleComponent {
  myControl = new FormControl('');

  updateValue(newValue: string) {
    this.myControl.setValue(newValue);
    // 如果需要手动触发变更检测,可以使用 ChangeDetectorRef
    // this.changeDetectorRef.detectChanges();
  }
}

如果你遇到了 FormControl 返回空值的问题,首先检查上述可能的原因,并尝试相应的解决方案。确保你的 FormControl 正确初始化并绑定到视图,处理好异步数据,并注意表单控件的状态和变更检测。

更多关于 Angular 表单的信息,可以参考官方文档:

如果你需要进一步的帮助,可以提供更多的上下文信息,以便更准确地诊断问题。

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

相关·内容

(转) 别再对 Angular 表单的 ControlValueAccessor 感到迷惑

本文我将使用原生表单控件术语来区分 Angular 特定的 formControl 和你 html 使用的表单控件,但你需要知道任何一个自定义表单控件都可以和 formControl 指令进行交互,而不是原生表单控件如...这个对象桥接原生表单控件和 formControl 指令,并同步两者的。...组件封装器 由于 Angular 为所有默认原生控件提供了控件访问器,所以封装第三方插件或组件时,需要写一个新的控件访问器。...registerOnChange 里我们简单保存了对回调函数 fn 的引用,回调函数是由 formControl 指令传入的(译者注:参考 L85),只要每次 slider 组件发生改变,就会触发这个回调函数... writeValue 方法内我们把得到的传给 slider 组件。 现在我们把上面描述的功能做成一张交互式图: ?

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

    ,一个 FormControl 类的实例对应于一个表单控件,使用时,通过将控件的实例赋值给属性,后续则可以通过监听这个自定义的属性来跟踪表单控件的和状态 import { Component, OnInit...通过使用 FormControl 控件的 value 属性,可以获得当前表单控件的一份数据拷贝,通过 setValue 方法则可以更新表单的控件 import { Component, OnInit...使用 FormBuilder 构建的控件,每个控件名对应的都是一个数组,第一个为控件的默认,第二项和第三项则是针对这个设定的同步、异步验证方法 import { Component, OnInit...,设定规则时,需要将模板中控件名对应的数据的第二个参数改为验证的规则 响应式表单中,数据源来源于组件类,因此应该在组件类中直接把验证器函数添加到对应的 FormControl 的构造函数上。...,返回 null,当数据无效时,则会返回一个对象信息,这里的 nameinvalid 就是我们模板中获取到的错误信息的 key <label

    18.9K20

    Angular系列教程-第四节

    两者都从视图中捕获用户输入事件、验证用户输入、创建表单模型、修改数据模型,并提供跟踪这些更改的途径 使用’@angular/forms’库中的FormGroup, FormControl,FormArray...,FormBuilder 等类构建出的数据对象就是响应式的表单,响应式的表单中,我们会在数据源里面进行各种操作,像添加校验等,html文件中使用 formGroup,formGroupName,formControlName...等将数据和视图进行绑定(需要引入ReactiveFormsModule) 模板驱动的表单是我们实例化好一个类的数据之后,html中使用 NgForm 指令后将数据和表单进行绑定,使用[(ngModel...总结 响应式表单是动态的,模板驱动表单是固定的 2.响应式表单使用 注册ReactiveFormsModule 组件导入FormControl 模板中注册组件 控件的(获取setvalue...,设置字段属性) 表单状态(status) formarray(管理任意数量控件) 表单验证 同步验证器和异步验证器 备注:同步验证先执行,异步验证后执行 3.模板驱动表单使用 导入formcontrol

    2.8K50

    React 应用架构实战 0x2:构建和文档化组件

    React 中,所有的东西都是组件。这种范式允许我们将用户界面拆分成更小的部分,从而更容易开发应用程序。它还启用了组件的可重用性,因为我们可以多个地方重复使用相同的组件。...还定义了我们希望组件中使用的主题颜色。然后,使用 extendTheme 将这些配置与默认主题组合在一起,它将合并所有配置并为我们提供完整的主题对象。...例如,我们可以轻松地一个地方更改主色,并将其应用于整个应用程序,而无需进行任何其他更改。...button"; # InputField src/components/form/input-field.tsx: import React from "react"; import { FormControl...ref} /> )} {error && {error.message}} </FormControl

    83010

    【STM32H7的DSP教程】第18章 DSP控制函数-更好用的SIN,COS计算

    函数参数:   第1个参数参数是角度。这里输入角度-180到179就能得到一个周期的正弦或者余弦数值。   第2个参数是转换后求出的sin。   第3个参数是转换后求出的cos。...这里输入角度 -2^31 ~ 2^31-1 就能得到一个周期的正弦或者余弦数值 18.4 定点数SIN和COS 使用表查找法和线性插方式来计算正弦和余弦。...函数参数:   第1个参数参数是角度。这里输入角度 -2^31 ~ 2^31-1 就能得到一个周期的正弦或者余弦数值。   第2个参数是转换后求出的sin。   第3个参数是转换后求出的cos。...只需要调用一次 * 形 参:无 * : 无 *****************************************************************...只需要调用一次 * 形 参:无 * : 无 *****************************************************************

    1K20

    写字机器人程序

    /记录x坐标 当前页-笔画数-点数 int yy[10][100][1000];//记录y坐标 当前页-笔画数-点数 int angle_big[10][100][1000]; //记录当前点的大臂角度...、延时数据记录、绘制起始点等功能 * 参 数:事件 * :无 **************************************************************...、延时数据记录、绘制相邻两点构成的直线等功能 * 参 数:事件 * :无 ********************************************************...* 功 能:将机械臂移动到指定步数 * 参 数:go_temp_big,go_temp_small 分别为大臂与小臂的目的角度,经过与当前角度比较,得出 * 运动对应步数反和方向...* 参 数:cont spinBox的 * :无 ******************************************************************

    42640

    【STM32F429的DSP教程】第18章 DSP控制函数-更好用的SIN,COS计算

    函数参数:   第1个参数参数是角度。这里输入角度-180到179就能得到一个周期的正弦或者余弦数值。   第2个参数是转换后求出的sin。   第3个参数是转换后求出的cos。...这里输入角度 -2^31 ~ 2^31-1 就能得到一个周期的正弦或者余弦数值 18.4 定点数SIN和COS 使用表查找法和线性插方式来计算正弦和余弦。...函数参数:   第1个参数参数是角度。这里输入角度 -2^31 ~ 2^31-1 就能得到一个周期的正弦或者余弦数值。   第2个参数是转换后求出的sin。   第3个参数是转换后求出的cos。...只需要调用一次 * 形 参:无 * : 无 *****************************************************************...只需要调用一次 * 形 参:无 * : 无 *****************************************************************

    80420

    【STM32F407的DSP教程】第18章 DSP控制函数-更好用的SIN,COS计算

    函数参数:   第1个参数参数是角度。这里输入角度-180到179就能得到一个周期的正弦或者余弦数值。   第2个参数是转换后求出的sin。   第3个参数是转换后求出的cos。...这里输入角度 -2^31 ~ 2^31-1 就能得到一个周期的正弦或者余弦数值 18.4 定点数SIN和COS 使用表查找法和线性插方式来计算正弦和余弦。...函数参数:   第1个参数参数是角度。这里输入角度 -2^31 ~ 2^31-1 就能得到一个周期的正弦或者余弦数值。   第2个参数是转换后求出的sin。   第3个参数是转换后求出的cos。...只需要调用一次 * 形 参:无 * : 无 *****************************************************************...只需要调用一次 * 形 参:无 * : 无 *****************************************************************

    89320

    Reactjs+BootStrap开发自制编程语言Monkey的编译器:词法解析1

    第二组是三个字符串或是字符的集合;第三组由等于号’=’组成;第四组是一个个特殊符号’+’组成的集合;第五组是由数字‘5’组成的集合;第六组是符号’;’独自组成的一个集合;为了区分不同的集合,我们为每一个集合赋予一个不同的,...直接赋与数值不利于人的理解,于是我们可以用编程中常量定义的方法,用不同的常量来对应不同的,例如: const LET = 0; const IDENTIFIER = 1; const EQUAL_SIGN...render执行时返回了一个JSX对象,其中有一个控件是这样的: <bootstrap.FormControl componentClass = "textarea" style={textAreaStyle...例如上面代码中,夹在尖括号中的组件叫bootstrap.FormControl, 那么reactjs解析到上面代码时,会自动调用bootstrap.FormControl.render(),于是一个输入文本框就会显示到页面上了..., 第二行的数字6,它对应的Token中,分类为4,对应到代码中是NUMBER,并且它所在的行号是1,从这两处结果看,词法解析的结果基本正确。

    2.6K10

    迷途知的滴滴

    对于滴滴来讲,这更像是一次迷途知中概股回港上市的大潮流里,纵然是滴滴不再这样一个时间档口选择从美股退市,未来的某一个时间点上,滴滴还是要选择从美股退市的。...从另外一个角度来看,纵然是业已占据了大半壁江山的滴滴,它的地位依然不是稳定的,甚至随时都有倒台的风险。...于是,我们看到的是,滴滴美股退市上的有关动作。事实上,外界对于滴滴美股的退市,市场是有一定的市场预期的。...无论是上市地点的重新选择,还是估的重新确定,都是需要慎重考虑的。...试想一下,如果迷途知的滴滴可以凭借其互联网时代积累下来的优势,探索出一条拥抱数字经济,服务实体的发展模式,那么,它依然还是可以继续维持,甚至巩固住业已形成的优势的。

    31520
    领券