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

如何使用NgIf使用Typescript而不是HTML从htmldom视图中删除元素？寻找类似的语法

宁愿在typescript中遍历数组，并从视图中删除项，而不是用NgIf包装所有20个formcontrols，这似乎有点重复

当前正在使用Formbuilder，而不是FormArray。这个链接没有样式显示，从我所读到的角度来看，这不是理想的做法。这是真的吗

我们有排除数组，并且更喜欢在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>

为您创建。
在这里，我使用自定义模型（数组）渲染字段：

<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>

主要步骤是调用

removeControl

和

addControl

方法。

---

在您的情况下，您只需调用

this.customerForm.removeControl（key）

我知道您想要创建一个“应用程序输入”。我建议应用程序输入作为构造函数FormGroupDirective注入，并直接使用[formControl]参见

并在模板中添加一些

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

{{getError（）}}

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

<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>

---

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

你能提供关于Stabliz的工作示例吗？我甚至没有工作示例可供解决，这个问题可以应用于任何具有多个字段的形式，如果你没有对其进行操作，你为什么要为它创建窗体对象？你想隐藏还是显示窗体控件？我真的无法理解你想要什么！1） 是否要从TS代码中禁用firstName？

@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>

  @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>