使用ngTemplateOutlet的Angular 8模板驱动的表单传递控件
是一种在Angular 8中使用模板驱动的表单来传递控件的方法。
模板驱动的表单是Angular中的一种表单处理方式，它通过在模板中使用特定的指令和绑定来处理表单的输入和验证。ngTemplateOutlet是Angular中的一个指令，它允许我们在模板中动态地插入其他模板。
使用ngTemplateOutlet的方式可以在模板驱动的表单中传递控件，使得表单的结构更加灵活和可复用。通过将控件的模板定义为一个ng-template，并使用ngTemplateOutlet指令将其插入到需要的位置，可以实现控件的复用和定制。
使用ngTemplateOutlet的优势包括：
- 灵活性：通过使用ngTemplateOutlet，可以在模板中动态地插入其他模板，使得表单的结构更加灵活，可以根据需要进行定制和扩展。
- 复用性：将控件的模板定义为一个ng-template，可以在多个地方复用该模板，减少了重复的代码编写。
- 可维护性：使用ngTemplateOutlet可以使表单的结构更加清晰和可维护，将控件的模板与其他部分分离，便于维护和修改。
使用ngTemplateOutlet的场景包括：
- 自定义表单控件：当需要创建自定义的表单控件时，可以使用ngTemplateOutlet来定义控件的模板，并在需要的地方插入该模板。
- 表单布局定制：当需要对表单的布局进行定制时，可以使用ngTemplateOutlet来插入自定义的布局模板，实现灵活的布局效果。
腾讯云相关产品中与Angular 8模板驱动的表单传递控件相关的产品是腾讯云云开发（Tencent Cloud Base），它是一款支持前后端一体化开发的云原生应用开发平台。腾讯云云开发提供了丰富的云端能力和开发工具，可以帮助开发者快速构建和部署应用。
腾讯云云开发的产品介绍链接地址：https://cloud.tencent.com/product/tcb
相关·内容
但我找不到适合我的解决方案。 viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], viewProviders:d
浏览 10提问于2019-08-02得票数 0
我有一个组件，我正在向它传递一个模板。在这个组件中，我想传递上下文，这样我就可以显示数据。@Component({ providers: [], <template [ngTemplateOutlet: 'no'}}</my-component>
因此，在my-component中，我传递
浏览 3提问于2016-12-22得票数 16
回答已采纳
我有一个包含表单的“基本”组件。在该表单中，有两个窗体控件，我不想在其中定义，而是在*ngTemplateOutlet中使用*ngTemplateOutlet。消息是正确的，因为窗体控件必须存在于窗体组中。我想我可以通过ngTemplateOutletContext传递上下文并解决这个问题，但它根本不起作用。[ngTemplateOutletContext]="{carFormGroup: carFormG
浏览 1提问于2019-07-23得票数 0
回答已采纳
我正在尝试使用Angular CDK stepper创建一个通用的Stepper组件，正如这里提到的https://material.angular.io/guide/creating-a-custom-stepper-using-the-cdk-stepper我想使用ngTemplateOutlet通过模板引用来传递stepper的页眉和页脚模板。 当我将按
浏览 21提问于2019-05-18得票数 3
我构建了一个可重用的表单输入，应该在表单中使用父formGroupName或作为普通的输入控件呈现。formControlName]="controlName"> child.component.ts
import { Component, OnInit, Input } from '@angularFormControl, FormGroup, ControlContainer,
浏览 4提问于2020-01-14得票数 3
我有一个带有输入控件的表单。一个元素是一个formarray数组。这个few数组有很少的输入控件。“添加”按钮来创建此窗体数组。当单击Add按钮时，应该会出现一个新的弹出窗口或模式来填充值。是否可以使用ngx bootstrap或angular材质，或者使用ngtemplateOutlet或ngcontainer。Advice please.Is可以将整个提交收集到一个模型中。
浏览 13提问于2019-12-07得票数 1
我使用的是Angular 8，代码结构如下。-- footer area --> <ng-container *ngTemplateOutlet="submitCancelAndReset;context:{isValid
浏览 6提问于2020-07-06得票数 0
当将上下文传递给ng模板时，在模板中使用对象文字会带来什么性能影响？，因为它(大概)正在创建一个新的对象？/angular/issues/13407). private _shouldRecreateView(changes: SimpleChanges): boolean {
constchanges['ngTemplateOutlet'] || (ctxChange &&am
浏览 1提问于2020-03-18得票数 2
我使用的是Angular 4，我试图访问一个组件中另一个组件的模板元素。我发现唯一有效的东西(如下图所示)不是很“角度”的。组件#1 (包含模板)： template: `...<input type="text" id="txtUserName" />` (&
浏览 3提问于2017-06-06得票数 4
3回答
: 'templateTwo'} ]和我定义了如下模板。/node_modules/@angular/core/fesm5/core.js.ViewContainerRef_.createEmbeddedView (core.js:21600)
atNgTemplateOutlet.push../node_modules/@angular/common/fesm5/common.js.Ng
浏览 23提问于2019-05-06得票数 0
5回答
有什么方法可以在Angular2中将变量传递给模板吗？假设我有以下代码： <ng-container *ngTemplateOutlet="inner"</ng-container> {{ foo.name }}
</ng-templa
浏览 5提问于2017-05-01得票数 27
回答已采纳
我试图利用将带有参数的模板传递给自定义组件。import { Component, Input, TemplateRef } from '@angular/core';
selector</h1>
<ng-container *ngTemplateOutlet="template"></ng-c
浏览 0提问于2019-08-07得票数 1
回答已采纳
3回答
当我提交我的表单时，我有这个函数如果我尝试执行以下操作
console.log(form.value.password); // this works perfect
浏览 3提问于2017-04-23得票数 3
回答已采纳
2回答
我想从树结构中生成一个反应式表单。import { Component, Input, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browse
浏览 9提问于2017-08-13得票数 4
回答已采纳
2回答
角模板内反应形式
、、、
在我们的应用程序中，我注意到表单的HTML中有很多重复的代码，大多数输入元素都有相同的结构，所以我想创建一个通用的输入组件，我们可以用它来保持文件的干净。我目前遇到的问题是，有一个表单中有2个嵌套的formGroups，例如：
postalAddress: this.fb.group我认为对于ng模板来说，这是一个很好<em
浏览 2提问于2022-03-24得票数 1
注意:我正在寻找反应式方法的解决方案。模板驱动窗体的解决方案已经是<form [formGroup]="mainForm"> <ng-container [ngTem
浏览 1提问于2019-08-28得票数 4
我有一个Angular 2表单，它使用模板驱动的方法，我正在将其转换为模型驱动的方法。目前，表单使用的样式如下： border-left: 5px solid #42A948; /* green */这将用绿色条标记所有具有必需属性的字段现在我将其转移到模型驱动，该控件不再
浏览 0提问于2016-06-02得票数 0
3回答
在我的组件中设置了this.value之后，我需要运行一个函数。我尝试使用生命周期钩子ngAfterContentInit()，但此时this.value要么为空，要么为空字符串。我引用我的组件如下：我的组件看起来像这样
const CUST
浏览 3提问于2016-09-10得票数 3
2回答
我必须说，我完全被网络上关于RC5角度形式的不同教程搞糊涂了。官方文件也没有消除混乱。另外，所有的教程都采用简单的路径--纯文本输入或选择控件。如果我需要单选按钮和复选框呢？
额外的好处，比如肮脏/原始，验证？表单模型(Form
浏览 4提问于2016-08-28得票数 5
回答已采纳
1回答
我有一个名为ItemsSelector的组件，它包含一个ListView： <ng-content></ng-content>以下是我如何使用ItemsSelector组件：
<StackLayout class="home-panelb
浏览 0提问于2018-04-23得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
腾讯会议
云直播
对象存储活动推荐
腾讯云开发者
