Переключите FormControl в представлении с помощью машинописи Formbuilder, используя Angular 8

Question

Как удалить элементы из HTML DOM View с помощью NgIf, используя Typescript, а не html? В поисках аналогичного синтаксиса.

Предпочитать выполнять итерацию по массиву в машинописи и удалять элементы из представления, а не оборачивать все 20 форм-контролов с помощью NgIf, кажется несколько повторяющимся.

В настоящее время используется Formbuilder , а не FormArray. Эта ссылка не отображает стиль, что не является идеальной практикой в ​​Angular из того, что я прочитал. Это правда?

Angular 2 -> как скрыть элементы управления с помощью FormGroup

У нас есть массив исключений, и мы предпочитаем отключать с помощью foreach в Typescript

Возможно что-то вроде этого?

Это отключает только поле, по-прежнему отображается в 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

Я вижу, вы хотите создать "приложение-ввод". Мое предложение заключается в том, что приложение-ввод внедрить как конструктор 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>

Если мы хотим добавить ошибки, мы можем улучшить ввод приложения, использовать ввод и функцию, чтобы получить первую ошибку среди ошибок

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

Ну, это всего лишь пример, я надеюсь, что это поможет вам

Answer 2

Создано 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);
  }

Основной шаг - вызов методов removeControl и addControl.
В вашем случае вам просто нужно вызвать this.customerForm.removeControl(key).