Fix tabs, fix imports, changed step to isEditing, and removed the class that was causing the weird styling

src/Squidex/app/features/schemas/pages/schema/field-wizard.component.html

@@ -5,12 +5,12 @@
         </ng-container>
 
         <ng-template #noParent>
-            {{step === 1 ? 'Add' : 'Edit'}} Field
+            {{isEditing ? 'Edit' : 'Add'}} Field
         </ng-template>
     </ng-container>
 
     <ng-container content>
-        <ng-container *ngIf="step === 1">
+        <ng-container *ngIf="!isEditing; else notEditing">
             <form [formGroup]="addFieldForm.form" (ngSubmit)="addField(false)">
                 <sqx-form-error [error]="addFieldForm.error | async"></sqx-form-error>
 
@@ -60,7 +60,7 @@
             </form>
         </ng-container>
 
-        <div class="table-items-row-details" *ngIf="step === 2">
+        <ng-template #notEditing>
             <form [formGroup]="editForm.form" (ngSubmit)="save()">
                 <div class="table-items-row-details-tabs clearfix">
                     <ul class="nav nav-tabs2">
@@ -91,19 +91,19 @@
                     </div>
                 </ng-container>
             </form>
-        </div>
+        </ng-template>
     </ng-container>
 
     <ng-container footer>
         <button type="reset" class="float-left btn btn-secondary" (click)="complete()">Cancel</button>
 
-        <div class="float-right" *ngIf="step === 1">
+        <div class="float-right" *ngIf="!isEditing">
             <button class="btn btn-success mr-1" (click)="addField(false, false)">Create and close</button>
             <button class="btn btn-success mr-1" (click)="addField(true, false)">Create and new field</button>
             <button class="btn btn-success" (click)="addField(false, true)">Create and edit field</button>
         </div>
 
-        <div class="float-right" *ngIf="step === 2">
+        <div class="float-right" *ngIf="isEditing">
             <button class="btn btn-success mr-1" (click)="save(true)">Save and add field</button>
             <button (click)="save()" class="btn btn-primary ml-1">Save and close</button>
         </div>

src/Squidex/app/features/schemas/pages/schema/field-wizard.component.ts

@@ -5,16 +5,10 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import {
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
-  Component,
+import { FormBuilder } from '@angular/forms';
-  ElementRef,
+import { onErrorResumeNext } from 'rxjs/operators';
-  EventEmitter,
+
-  Input,
-  OnInit,
-  Output,
-  ViewChild
-} from "@angular/core";
-import { FormBuilder } from "@angular/forms";
 import {
     AddFieldForm,
     AppPatternDto,
@@ -29,16 +23,15 @@ import {
     SchemasState,
     Types,
     UpdateFieldDto
-} from "@app/shared";
+} from '@app/shared';
-import { onErrorResumeNext } from "rxjs/operators";
 
 @Component({
-  selector: "sqx-field-wizard",
+    selector: 'sqx-field-wizard',
-  styleUrls: ["./field-wizard.component.scss"],
+    styleUrls: ['./field-wizard.component.scss'],
-  templateUrl: "./field-wizard.component.html"
+    templateUrl: './field-wizard.component.html'
 })
 export class FieldWizardComponent implements OnInit {
-  @ViewChild("nameInput")
+    @ViewChild('nameInput')
     public nameInput: ElementRef;
 
     @Input()
@@ -59,8 +52,6 @@ export class FieldWizardComponent implements OnInit {
     public selectedTab = 0;
     public patterns: ImmutableArray<AppPatternDto>;
 
-  public step = 1;
-
     constructor(
         private readonly formBuilder: FormBuilder,
         private readonly schemasState: SchemasState,
@@ -69,7 +60,7 @@ export class FieldWizardComponent implements OnInit {
 
     public ngOnInit() {
         if (this.parent) {
-      this.fieldTypes = this.fieldTypes.filter(x => x.type !== "Array");
+            this.fieldTypes = this.fieldTypes.filter(x => x.type !== 'Array');
         }
         this.patternsState
             .load()
@@ -96,7 +87,7 @@ export class FieldWizardComponent implements OnInit {
                         }
                     } else if (edit) {
                         this.selectTab(0);
-            this.step++;
+                        this.isEditing = true;
                     } else {
                         this.complete();
                     }
@@ -117,7 +108,7 @@ export class FieldWizardComponent implements OnInit {
 
         if (value) {
             const properties = createProperties(
-        this.field.properties["fieldType"],
+                this.field.properties['fieldType'],
                 value
             );
 
@@ -129,10 +120,9 @@ export class FieldWizardComponent implements OnInit {
                 )
                 .subscribe(
                     () => {
-            this.isEditing = false;
                         this.editForm.submitCompleted();
                         if (addNew) {
-              this.step--;
+                            this.isEditing = false;
                         } else {
                             this.complete();
                         }