javascript - 插值,数据绑定,角度 javascript
问题描述
这是切换案例,我通过拖放的内部 HTML 发送登录表单 HTML。
case 'form':
if (this.formbuild) {
} else {
this.global_service.showNotification('Form Already Listed',4);
}
this.formbuild=true;
this.buttonPanelSettings = true;
data = document.createElement('div');
data.setAttribute('id', 'column1');
data.setAttribute('class', 'row');
data.style.height = 'auto';
data.style.width = 'auto';
var count = document.getElementsByClassName("dynamic_coulmn1").length;
data.className = "dynamic_coulmn1";
data.id = "dynamic_coulmn1_" + count;
// tslint:disable-next-line:max-line-length
data.innerHTML = '<div class="container"><div class="row"><div class="col-sm-9 col-md-7 col-lg-5 mx-auto"><div class="card card-signin mb-5 mt-5"><div class="card-body text-center"><h2 class="card-title text-center mt-3 mb-4">Login Form</h2><form action="#" id="mainform" method="get" name="mainform"><span id="myForm"></span><p></p><input type="submit" class="btn mt-2 mb-2 btn-info" value="Submit"></form></div></div></div></div></div>';
this.totalComponents.column1.push({ column1: data.id });
data.onclick = this.clickCurrentButton.bind(this, count);
break;
下面的代码是我想与登录表单名称绑定的输入字段。这可以帮助我通过输入字段更改登录表单名称
<div class="input-group input-group-sm mb-3" *ngIf="buttonPanelSettings">
<div class="input-group-prepend">
<span class="input-group-text module_font" id="inputGroup-sizing-sm">Form Name:</span>
</div>
<input type="text" class="form-control inside_size" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm"
name="fucntion" placeholder="model name">
</div>
解决方案
使用角度的两种方式绑定技术。在 Angular 2+ 版本中,您只需要像这样将 ngModel 添加到输入中
<input type="text" class="form-control inside_size" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm"
name="fucntion" placeholder="model name" [(ngModel)]="formName">
并在您的 .ts 文件中声明这样的变量
formName : any;
推荐阅读
- node.js - 如果我传递的对象具有比表中现有属性更多的属性,sequelize update 方法会在表中创建新列吗?
- sql - EF Core 3.1 生成破坏旧代码的 ORDER BY (SELECT 1)
- excel - 如何创建复制单元格的宏,将它们粘贴到第一个可用行并清除一些内容
- google-cloud-platform - 无法使用自定义预测例程将经过训练的模型部署到 Google Cloud Ai-Platform:模型需要的内存超出了允许的范围
- java - 在库中配置套接字连接
- python - 如何删除 TypeError:+ 的不支持的操作数类型:'int' 和 'vectorize',vectorize,astype 不起作用
- typescript - 在 Visual Studio Code 中重构打字稿后,任何要在单引号中导入的配置?
- r - 将站点位置叠加为 tmap 上的点
- centos7 - VOB 服务器操作使容器永久失败
- certificate-authority - 用于管理 Github SSH 证书的 SSH CA