使用Angular 8使用Formbuilder Typescript在视图中切换FormControl

Question

如何使用Typescript而不是HTML从NgIf的HTML DOM视图中移除元素？寻找相似的语法。

更喜欢在打字稿中遍历数组，并从视图中删除项目，而不是用NgIF包装所有20个表单控件，这似乎有点重复。

当前使用的是Formbuilder，而不是FormArray。这个链接将样式显示为“无”，从我的阅读来看，这不是Angular的理想实践。这是真的吗？

角度2 -

我们有排除数组，并且更喜欢在 Typescript 中使用 foreach 禁用

也许是这样的？

这仅禁用该字段，仍显示在 html 视图中

Object.keys(this.customerForm.controls).forEach(key => {
     if (this.excludeFormControlArray.indexOf(key) >= 0) {
         this.customerForm.get(key).disable;  // This only disables the field, still shows in html View


this.customerForm = this.formBuilder.group({
  'firstName': [null, [Validators.maxLength(50), PhoneNumberValidator]],
  'phoneNumber': [null, [Validators.maxLength(50), PhoneNumberValidator]],
  'streetName': [null, [Validators.maxLength(50), PhoneNumberValidator]],

  'emailAddress': [null, [Validators.maxLength(50), Validators.email]],
  'city': [null, [Validators.required, Validators.maxLength(200)]],
  'state': [null, [Validators.maxLength(200)]],
  'zip':[null,[Validators.maxLength(200)]]
});

.HTML

//试图防止用ngIf包装每个项目，项目被放置在页面上的特殊位置，由于UX线框规范，NgFor不完全可能，html/css视图比这复杂得多，

<div class = "row">
    <app-input-textbox  formControlName = "firstName"></app-input-textbox>
<div class = "row">
<div class = "column">
    <app-input-textbox  formControlName = "emailAddress"></app-input-textbox>
</div>
<div class = "test">
    <app-input-textbox  formControlName = "state"></app-input-textbox>
    <app-input-textbox  formControlName = "zip"></app-input-textbox>
</div>

Answer 1

为您创建了stackblitz
这里我使用自定义模型（数组）来呈现字段：

<h1>My dynamic form</h1>
<form [formGroup]="formGroup">
  <div *ngFor="let input of inputList">
    <label>{{ input.label }}</label>
    <input type="{{ input.type }}" formControlName="{{ input.formControlName }}">
    <span (click)="removeInputField(input)">Remove</span>
  </div>
  <div>
    <button type="button" (click)="addInputField()">Add Input Field</button>
    <button type="submit">Submit</button>
  </div>
</form>

这里有两种添加和删除控件的方法：

  addInputField() {
    const formControlName = prompt("FormControlName input: ");
    const inputType = prompt("Type input: ");
    const label = prompt("Label input: ");
    const inputData = {
      inputType: inputType,
      formControlName: formControlName,
      label: label
    };
    this.inputList.push(inputData);
    this.formGroup.addControl(
      inputData.formControlName,
      this.formBuilder.control("")
    );
  }

  removeInputField(inputField: InputField) {
    this.formGroup.removeControl(inputField.formControlName);
    this.inputList = this.inputList.filter(field => field !== inputField);
  }

主要步骤是调用＜code＞removeControl＜/code＞和＜code＞addControl＜/ccode＞方法
在您的情况下，您只需调用this.customerForm.removeControl（key）。

Answer 2

我看到你想创建一个“应用程序输入”。我的建议是应用程序输入作为构造函数FormGroupDirective注入，并直接使用[formControl]参见stackblitz

@Component({
  selector: 'app-input',
  template: `
  <ng-container *ngIf="control && control.enabled">
  {{label}}
  <input [formControl]="control">
  </ng-container>
  `
})
export class HelloComponent  {

  constructor( @Optional() @Host() private form:FormGroupDirective){}
  control:FormControl
  @Input() set name(value)
  {
    this.control=this.form?this.form.form.get(value) as FormControl:null
  }
  @Input() label: string;
}

这允许我们有一种形式

<form [formGroup]="formGroup">
  <app-input name="one" label="One"></app-input>
  <app-input name="two" label="Two"></app-input>
</form>

如果我们想添加错误，我们可以改进app输入，使用输入和函数来获取错误中的第一个错误

  @Input() errors:any={} //see that, by defect it's an empty object

  getError()
  {
    for (let key of Object.keys(this.errors))
    {
       if (this.control.hasError(key))
            return this.errors[key]
    }
  }

并在模板中添加一些类似的内容

  <div *ngIf="control.touched">
    {{getError()}}
  </div>

我们的主应用变得像，例如

<form [formGroup]="formGroup">
  <app-input name="one" label="One" [errors]="{required:'One is required'}"></app-input>
  <app-input name="two" label="Two"></app-input>
</form>

好吧，这只是一个例子，我希望这能帮助你