插值，数据绑定，角度 javascript

Question

这是切换案例，我通过拖放的内部 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>

Answer 1

使用angular的两种方式绑定技术。 在 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;