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

在p-chip和formcontrolname之间设置一个逻辑

,可以通过使用Angular框架中的表单控件和事件绑定来实现。

首先,p-chip是PrimeNG库中的一个组件,用于显示和管理标签。它可以用于选择多个选项或标记内容。formcontrolname是Angular中的一个指令,用于将表单控件与模型中的属性进行绑定。

要在p-chip和formcontrolname之间设置一个逻辑,可以使用Angular的表单控件和事件绑定来监听p-chip的选择或取消选择事件,并更新绑定的表单控件的值。

以下是一个示例代码:

在组件的HTML模板中:

代码语言:txt
复制
<p-chip (onAdd)="onChipAdd($event)" (onRemove)="onChipRemove($event)"></p-chip>
<form [formGroup]="myForm">
  <input type="text" formControlName="chips">
</form>

在组件的TypeScript代码中:

代码语言:txt
复制
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } 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({
      chips: []
    });
  }

  onChipAdd(chip: any) {
    const chips = this.myForm.get('chips').value || [];
    chips.push(chip);
    this.myForm.get('chips').setValue(chips);
  }

  onChipRemove(chip: any) {
    const chips = this.myForm.get('chips').value || [];
    const index = chips.indexOf(chip);
    if (index > -1) {
      chips.splice(index, 1);
      this.myForm.get('chips').setValue(chips);
    }
  }
}

在上述代码中,我们创建了一个表单控件myForm,并将其与模板中的输入框绑定。当p-chip组件的onAdd事件触发时,我们将选择的标签添加到表单控件的值中。当p-chip组件的onRemove事件触发时,我们将移除的标签从表单控件的值中删除。

这样,我们就可以在p-chip和formcontrolname之间设置一个逻辑,实现对标签的选择和取消选择的控制。

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

相关·内容

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

使用 ngModel 进行模板绑定时,angular form 标签上自动附加了一个 NgForm 指令,因为 NgForm 指令会控制表单中带有 ngModel 指令 name 属性的元素,而...,一个 FormControl 类的实例对应于一个表单控件,使用时,通过将控件的实例赋值给属性,后续则可以通过监听这个自定义的属性来跟踪表单控件的值状态 import { Component, OnInit...4.3.2、通过 FomGroup 组合多个控件 一个表单不可能只有一个控件,通过组件中构造 FormGroup 实例来完成对于多个表单控件的统一管理 使用 FormGroup 时,同样组件中定义一个属性用来承载控件组实例...array,用于组件类中分别生成 FormControl、FormGroup FormArray 使用 FormBuilder 构建的控件,每个控件名对应的值都是一个数组,第一个值为控件的默认值,...模板驱动表单中,因为不是直接使用的 FormControl 实例,因此这里应该在模板上添加一个自定义的指令来完成对于控件数据的校验 使用 angular cli 创建一个用来进行表单验证的指令 ng

18.9K20

Angular 2 + 折腾记 :(7) 初步了解表单:模板驱动及数据驱动及脱坑要点

模板驱动表单依赖FormsModule,数据驱动的表单依赖FormsModule,ReactiveFormsModule 一般做表单校验及操作推荐用数据驱动的方式,好维护理解。。...---- 模板驱动 模板驱动:主要是依赖[(ngModel)]#scope_var以及原生表单控件属性(require,minlenght,maxlength等)来操作表单的那的值亦或者校验 一个最简单的例子...--#UserName 是局部变量,若是有ngmodel,拿到的就是一个响应对象,若是非ngmodel绑定的,则是dom元素代码--> <!...()函数内,点击提交的时候对整个表单一一去判断,传统方式基本这样 每个控件输入的时候对应去触发对应的事件做校验,比如[ngModelChange]来处理双向绑定的值校验 ---- 数据驱动(Reactive...---- 嵌套表单 有些时候我们接口数据层次不可能只有一层,出现两层三层都有可能; 这时候需要我们构建一个嵌套表单。。。

3.8K20
  • 分布式事务:不过是一致性、吞吐量复杂度之间,做一个选择

    针对微服务下的交易业务如何保障数据一致性,本文尽量做到理论结合实际,将我们实际产品中用到的分布式事务实现机制,大家扒一扒,希望能帮助到读者。...基于事件模式,需要重点考虑的是事件的可靠到达,我们产品实际支持过程中,通常有本地事件表、外部事件表两种模式: 1、本地事件表方法将事件业务数据保存在同一个数据库中,使用一个额外的“事件恢复”服务来恢复事件...考虑到事件恢复可能会有一定的延时,服务完成本地事务后可立即向消息代理发布一个事件。 ?...1)微服务一个本地事务中记录业务数据事件; 2)微服务实时发布一个事件立即通知关联的业务服务,如果事件发布成功立即删除记录的事件; 3)事件恢复服务定时从事件表中恢复未发布成功的事件,重新发布,重新发布成功才删除记录的事件...六、TCC模式 一个完整的TCC业务由一个主业务服务若干个从业务服务组成,主业务服务发起并完成整个业务活动,TCC模式要求从服务提供三个接口:Try、Confirm、Cancel。· ?

    1.1K40

    在前端中理解MVC服务之 Angular篇(完结)

    :BrowserModule 、FormsModule reactiveFormsModule,第一个模块用于从 Angular 获取基本结构属性指令,而第二个第三个模块用于创建窗体。...Models (贫血模式) 此示例中的第一个生成类是应用程序模型,user.model.ts由类属性生成随机 D 的私有方法(这些代码可能来自服务器中的数据库)。...Angular 执行此任务,ContModel之间执行绑定。...Controller将通过依赖注入(DI)接收其具有的两个依赖项(Service formBuilder).这些依赖项将存储Controller中的私有变量。...,我们开发了一个 Web 应用程序,其中项目的结构遵循 MVC 体系结构,其中使用了贫血模型,逻辑的责任在于Service。

    4.1K20

    【MATLAB】基本绘图 ( 绘制多图 | 设置图形对话框在 Windows 界面的位置大小 | 一个图形上绘制多个小图形 )

    3文章目录 一、绘制多图 1、绘制多图 2、代码示例 二、设置图形对话框在 Windows 界面的位置大小 三、一个图形上绘制多个小图形 一、绘制多图 ---- 1、绘制多图 存在一种绘图情况 ,..., 如果要设置 gcf , gca , 注意获取的是哪个绘图对象 ; 一个 figure 与第二个 figure 之间调用 gca , 获取的是第一个 figure 图形的坐标轴对象 ; 第二个..., 平方函数 figure, plot(x, y1); % 绘制第二个图像 , 指数函授 figure , plot(x, y2) 绘图结果 : 二、设置图形对话框在 Windows 界面的位置大小...---- 使用 figure 函数可以设置图形的位置大小 ; 用法如下 : figure('Position', [left, bottom, width, height]); left 参数 :...1 ~ m \times n 之间的数值 ; 本示例中是 1 ~ 6 之间的数值 ; 代码示例 : % 生成 x 轴数据 , -10 ~ 10 , 步长 0.1 t = 0 : 0.1 :

    6.8K70

    Angular: 最佳实践

    Note: 本文中,我将尽量避免官方 Angular Style Guide 提及的模式有用的实践,而是专注我自己的经验得出的东西,我将用例子来说明。...应用程序的 tsconfig.json 文件中,我们可以设置这个标志,告诉编辑器未明确类型时候抛出错误。否则,编辑器坚定它无法推断变量的类型,而认为是 any 类型。...并且模版中的每个地方都会显示通知,你可以使用 ngClass 设置未通知的样式。现在,我们想将通知的状态与枚举值进行比较,我们必须将枚举导入组件。..., status: Statuses.Read} ]; } 复制代码 所以,现在我们有一个基本组件(实际上就是一个容器),我们的组件可以从中派生以重用应用程序的全局值方法。...我们知道一个路由对应一个 Angular 组件,但是我推荐你使用容器组件,它将处理数据(如果有数据需要传递的话)并将数据传递给另外一个组件,该组件将使用输入所包含的真实视图 UI 逻辑

    2.8K40

    Angular系列教程-第四节

    ,并提供跟踪这些更改的途径 使用’@angular/forms’库中的FormGroup, FormControl,FormArray,FormBuilder 等类构建出的数据对象就是响应式的表单,响应式的表单中...,我们会在数据源里面进行各种操作,像添加校验等,html文件中使用 formGroup,formGroupName,formControlName等将数据视图进行绑定(需要引入ReactiveFormsModule...) 模板驱动的表单是我们实例化好一个类的数据之后,html中使用 NgForm 指令后将数据表单进行绑定,使用[(ngModel)]来将表单的数据和和视图进行双向绑定,NgForm 指令为 form...) formgroup使用 表单提交 更新部分内容(patchValue) 表单验证(导入Validators,设置字段属性) 表单状态(status) formarray(管理任意数量控件...结构型指令 — 通过添加移除 DOM 元素改变 DOM 布局的指令,比如ngfor、ngif 属性型指令 — 改变元素、组件或其它指令的外观行为的指令,比如ngstyle 6.属性型指令 6.1

    2.8K50

    Angular2 :从 beta 到 release4.0 版本升级总结

    @NgModule 接收一个元数据对象,该对象告诉 Angular 如何编译运行模块代码。 它标记出该模块拥有的组件、指令管道, 并把它们的一部分公开出去,以便外部组件使用它们。...更改表单内input属性[ngFormControl]为formControlName => <input formControlName...解决办法:app根组件声明provider注入ResultHandler服务,则整个app使用同一个实例。 3....原因:angular(v4.1.1)中,需使用[ngStyle]属性方式对样式进行设置。 解决办法:1) 更改为[ngStyle]="{'color': someValidation ?...解决办法:注入DomSanitizer服务可以把一个值标记为可信任的,这里添加了一个叫safeUrl的pipe组件,位于app/shared/pipe/safe-url.main.pipe.ts。

    8.2K00

    使用Angular8百度地图api开发《旅游清单》

    ,作为一名合格的coder,必须博学而专一,也是因为笔者早年大学时期想要做的一个想法,可以有这样一个程序,记录自己的路途,见闻感想。...项目的首页展示的是已去过的旅游地点路线,地图路线是通过调用百度地图api实现的,当然提供这样的api很多,大家可以根据自己的喜好去使用。其次我们可以首页添加未来的旅游规划预算,方便后面使用。...一个应用通常会包含很多功能模块。 组件 每个 Angular 应用都至少有一个组件,也就是根组件,它会把组件树页面中的 DOM 连接起来。...每个组件都会定义一个类,其中包含应用的数据逻辑,并与一个 HTML 模板相关联,该模板定义了一个供目标环境下显示的视图 比如: import { Component, OnInit } from '@...,它可以让你定义应用的各个不同状态视图层次结构之间导航时要使用的路径。

    6K30

    理论 | Angular 中的响应式编程 -- 浅淡 Rx 的流式思维

     Rx--隐藏在Angular 2.x中利剑 一文中我们已经初步的了解了 Rx Rx Angular 的应用。 今天我们一起通过一个具体的例子来理解响应式编程设计的思路。...我给出的答案很简单:响应式编程可以让你把程序逻辑想的很清楚。为什么这么说呢?让我们先来看一个小例子,比如我们有这样一个需求,在生日的控件之前添加一个年龄的选择,用以辅助生日的输入。...如果按传统方式编程的话,我们可能需要在年龄年龄单位的两个处理输入改变的 event handler 去对数据进行处理,具体我们就不展开了。我们来看一下用响应式编程如何处理这个逻辑。...其实我们需要的是任何一个流的值变化的时候,新的合并流都应该有一个对应数据,这个数据包括刚刚变化的那个值一个流中最新的值。...Angular 中处理响应式表单只有 3 个步骤: 1、组件的 HTML 模版中给要处理的控件加上 formControlName="blablabla" 2、form 标签中添加 [formGroup

    5.3K10

    当nz-checkbox-group多选框组遇上必选校验

    nz-form-control nz-col [nzSpan]="10" [nzValidateStatus]="getFormControl('one')"> <nz-checkbox-group formControlName...打了一下发现还真有一个this.getFormControl('one').setErrors()的方法,于是在上面的基础上想到这样一个方式: if(this.validateForm.value.scopes.length...再次尝试 到这曾一度想过放弃然后自己用原始方式写,再一想到原始方式还要自己考虑样式什么的,作为一个有着css恐惧症的Java程序猿我决然地选择了硬着头皮啃会儿。...刷了n+1遍ng-zorro-antd的官方文档的表单部分后,“自定义异步校验”中看到这样一句话 : 当使用 响应式表单(Reactive Form) 时, 的...nzValidateStatus 会自动从 NgControl 中获取数据,也可以手动指定特定的 NgControl组件将表单校>验函数的校验过程异步返回的结果显示对应的error | validating

    4.4K20

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

    如果你使用响应式表单,你需要显式创建 FormControl 对象,并使用 formControl 或 formControlName 指令来绑定原生控件;如果你使用模板驱动方法,FormControl...DOM 表单控件如 input,textarea 进行交互,并且很有可能需要自定义一个表单控件作为 Angular 组件而不是使用原生表单控件,而通常自定义表单控件会封装一个使用纯 JS 写的控件如...本文我将使用原生表单控件术语来区分 Angular 特定的 formControl 和你 html 使用的表单控件,但你需要知道任何一个自定义表单控件都可以 formControl 指令进行交互,而不是原生表单控件如...组件封装器 由于 Angular 为所有默认原生控件提供了控件值访问器,所以封装第三方插件或组件时,需要写一个新的控件值访问器。...当然我们也可以使用 ngOnChanges 生命周期钩子来追踪输入属性 value 值的变化,一旦其值变化,我们就将该值设置为 slider 控件的值。

    3.8K20

    如何在Ubuntu 18.04上使用PostgreSQL 10设置逻辑复制

    它还允许地理上分布的数据库服务器之间进行对等复制。 PostgreSQL是一个开源的对象 - 关系数据库系统,具有高度可扩展性,符合ACID(原子性,一致性,隔离性,耐久性)SQL标准。...步骤1 - 为逻辑复制配置PostgreSQL 您需要修改几个配置设置以启用服务器之间逻辑复制。首先,您将配置Postgres以侦听专用网络接口而不是公共接口,因为通过公共网络公开数据存在安全风险。...第2步 - 设置数据库,用户角色表 要测试复制设置的功能,我们创建一个数据库,表用户角色。您将使用示例表创建一个example数据库,然后可以使用该表来测试服务器之间逻辑复制。...因此,大多数应用程序会将所有写入操作定向到主服务器,并在可用副本服务器之间分配读取。 您现在可以两台服务器上退出psql提示: \q \q 现在您已完成设置测试,您可以自己添加复制数据。...10,并在它们之间配置了逻辑复制。

    2.9K50

    【前端设计模式】之调停者模式(中介者模式)

    调停者模式特性将对象之间的通信集中一个调停者对象中,避免了对象之间的直接耦合。调停者对象可以控制和协调一组相关对象之间的交互。调停者模式可以简化复杂系统中的交互逻辑,使代码更易于理解维护。...表单验证一个表单中,各个输入字段之间可能存在依赖关系。使用调停者模式可以将表单验证逻辑集中一个验证器对象中,各个输入字段只需要将自己的值传递给验证器进行验证即可。...最后,分别设置 field1  field2 的值为 'value1'  'value2'。2. 组件间通信一个复杂的前端应用中,各个组件之间可能需要进行通信和协调。...使用调停者模式可以将组件之间的通信逻辑集中一个调停者对象中,各个组件只需要将自己的状态或事件传递给调停者进行处理即可。这样可以避免组件之间直接进行通信,并且使得组件之间的关系更加清晰。...优缺点优点降低了对象之间的耦合度,使得代码更易于维护扩展。集中处理了对象之间的交互逻辑,使得代码更易于理解。可以简化复杂系统中的交互逻辑,提高代码的可读性可维护性。

    19120
    领券