Question

当前，我有3-4个输入元素，这些元素最初已被隐藏，并且我将它们绑定到变量new元素上，然后单击enter。用户单击输入后，我想关注新添加的项目。我已经在功能handleKeyDown中处理了回车按钮事件。

create-report.html

<form class="form" (submit)="submit($event)">
  <div class="loginmodal-container">
    <br>

    <div class="row form-group">
     <input (keyup.enter)="handleKeyDown($event)" [(ngModel)]="title"  id="title" aria-describedby="titlehelp" type="text" name="title" placeholder="Enter Post Title" class="form-control" />
    </div>

    <div class="row form-group">
       <input id="industry" (keyup.enter)="handleKeyDown($event)" [class.display]="titleflag" aria-describedby="indushelp" type="text" name="industry" placeholder="Enter Industry" class="form-control" />
    </div>

    <div class="row form-group">
           <input id="desc" (keyup.enter)="handleKeyDown($event)" [class.display]="indusflag" aria-describedby="deschelp" type="text" name="desc" placeholder="Enter your report description" class="form-control" />
    </div>
    <!-- <div id="adddata" align='left'>
        <i class="fa fa-plus-circle"></i>
    </div> -->

    <input type="submit" name="submit" class="login loginmodal-submit" value="Post Report">

  </div>
  </form>

create-report.ts

import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-create-report',
templateUrl: './create-report.component.html',
styleUrls: ['./create-report.component.css']
})
export class CreateReportComponent implements OnInit {

title = '';
industry = '';
desc = '';
titleflag = false;
indusflag = false;
constructor() { }

ngOnInit() {
}
submit(e) {
e.preventDefault();
}
private handleKeyDown(event: any) {
  const target = event.target || event.srcElement || event.currentTarget;
  const idAttr = target.attributes.id;
  const getid = idAttr.nodeValue;
if (event.keyCode === 13) {
  if ( getid === 'title' ) {
    if ( target.value !== '' ) {
      this.titleflag = true;
    }
  }
  if ( getid === 'industry' ) {
    if ( target.value !== '' ) {
      this.indusflag = true;
      event.srcElement.nextElementSibling.focus();
      }
    }
  }
 }

}

我还想添加新元素，例如我们在中等博客中创建新故事。有什么方法可以将其添加到此角度应用程序中吗？

Answer 1

这可以考虑创建带有添加所需验证器的支持的动态模板表单的简单方法。

组件

  controls = {
    items: [
      { type: 'text', id: 'name', required: true, label: 'Name' },
      { type: 'text', id: 'age', required: true, label: 'Age' },
      { type: 'textarea', id: 'address', required: false, label: 'Address' }
    ],
    value: {}
  }

模板

<div *ngFor="let control of controls.items">
  <label >{{control.label}}</label>
    <ng-container [ngSwitch]="control.type" >
    <input *ngSwitchCase="'text'" type="text" [(ngModel)]="controls.value[control.id]" 
        [required]="control.required">
    <textarea *ngSwitchCase="'textarea'" [(ngModel)]="controls.value[control.id]" 
        [required]="control.required">
      </textarea>
  </ng-container>
</div>

{{controls.value | json}}

stackblitz demo

controls.items属性定义了控件元素的结构和 controls.value是表单值，因此如果您将默认值添加到因为我们使用ngModel，所以value属性将绑定到该元素。

我想添加动态输入和textarea元素以在中和角度应用程序中形成

1 个答案: