formulario

<mat-toolbar>
        <span>{{data.title}}</span>
        <span class="fill-remaining-space"></span>
        <!-- <button  id ="bc" class="btn btn-info btn-xs" mat-stroked-button (click)="onClose()" tabIndex="-1">X</button> -->
        <button  id ="bc" class="btn btn-info btn-xs" mat-stroked-button (click)="onClose()" >X</button>
</mat-toolbar>

                                        <!-- Mi Formulario para Editar/Crear Equipo -->
<form [formGroup]="this.PrtgServiceForm.EquipoForm" class="normal-form" (submit)="onSubmit()">

   <mat-grid-list cols="2">
        <mat-grid-tile>
            <div class="controles-container">

                    <!-- Campo id_equipo -->

            <mat-form-field>
                <input matInput formControlName="id_equipo" matInput placeholder="ID Equipo*" readonly>
                <mat-error>Este Campo es Requerido</mat-error>
            </mat-form-field>

                                <!-- Campo nombre -->
            <mat-form-field>
                <input formControlName="nombre" matInput placeholder="Nombre del Equipo*">
                <mat-error>Este Campo es Requerido</mat-error>
            </mat-form-field>
                              <!-- Campo vendedor -->
            <ng-container *ngIf='!isDisVen'>
                 <mat-form-field>
                     <mat-select  formControlName="vendedor" placeholder="Vendedor"(selectionChange)="onSelectionVendedor($event)">
                        <mat-option *ngFor='let x of data.vendedor_unique' [value]='x'>
                                      {{x}}
                        </mat-option>
                        <mat-option value="nuevo">Agregar un nuevo Vendedor</mat-option>
                    </mat-select>
                    <mat-error>Este Campo es Requerido</mat-error>
                </mat-form-field>
            </ng-container>

            <ng-container *ngIf="isInputVen">
                <mat-form-field>
                    <input matInput formControlName="vendedor" matInput placeholder="Vendedor" >
                    <mat-error>Este Campo es Requerido</mat-error>
                 </mat-form-field>
            </ng-container>

                              <!-- Campo Ip Gestion -->
              <mat-form-field>

                  <input formControlName="ip_gestion" matInput placeholder="IP Gestion">
                  <mat-error>Este Campo es Requerido (Valor por Defecto:0.0.0.0)</mat-error>
              </mat-form-field>
            </div>
        </mat-grid-tile>

        <!-- Con mat-grid-title lo que se crea es una columna, de manera que en el formulario tenemos 2 Columnas -->

        <mat-grid-tile>
           <div class="controles-container">
                            <!-- Campo Tipo -->
            <ng-container *ngIf='!isDisTipo'>
                    <mat-form-field>
                        <mat-select  formControlName="tipo" placeholder="Tipo"(selectionChange)="onSelectionTipo($event)">
                            <mat-option *ngFor='let x of data.tipo_unique' [value]='x'>
                                {{x}}
                            </mat-option>
                            <mat-option value="nuevo">Agregar un nuevo Tipo</mat-option>
                        </mat-select>
                        <mat-error>Este Campo es Requerido</mat-error>
                    </mat-form-field>
                </ng-container>

                <ng-container *ngIf="isInputTipo">
                    <mat-form-field>
                        <input matInput formControlName="tipo" matInput placeholder="Tipo" >
                        <mat-error>Este Campo es Requerido</mat-error>
                    </mat-form-field>
                </ng-container>
                                             <!-- Campo Localidad -->

               <ng-container *ngIf='!isDisLoc'>
                    <mat-form-field>
                        <mat-select  formControlName="localidad" placeholder="Localidad"(selectionChange)="onSelectionLocalidad($event)">
                            <mat-option *ngFor='let x of data.localidad_unique' [value]='x'>
                                       {{x}}
                            </mat-option>
                            <mat-option value="nuevo">Agregar una nueva Localidad</mat-option>
                        </mat-select>
                         <mat-error>Este Campo es Requerido</mat-error>
                    </mat-form-field>
                </ng-container>

                 <ng-container *ngIf="isInputLoc">
                    <mat-form-field>
                        <input matInput formControlName="localidad" matInput placeholder="Localidad" >
                        <mat-error>Este Campo es Requerido</mat-error>
                    </mat-form-field>
                </ng-container>
                                <!-- Campo Categoria -->

                <ng-container *ngIf='!isDisCat'>
                    <mat-form-field>
                        <mat-select  formControlName="categoria" placeholder="Categoria"(selectionChange)="onSelectionCategoria($event)">
                            <mat-option *ngFor='let x of data.categoria_unique' [value]='x'>
                                            {{x}}
                            </mat-option>
                            <mat-option value="nuevo">Agregar una nueva Categoria</mat-option>
                        </mat-select>
                        <mat-error>Este Campo es Requerido</mat-error>
                    </mat-form-field>
                </ng-container>

                <ng-container *ngIf="isInputCat">
                    <mat-form-field>
                        <input matInput formControlName="categoria" matInput placeholder="Categoria" >
                         <mat-error>Este Campo es Requerido</mat-error>
                    </mat-form-field>
                </ng-container>

                <mat-form-field>
                        <input formControlName="com_snmp" matInput placeholder="Comunidad SNMP del Equipo">
                        <mat-error>Este Campo es Requerido</mat-error>
                </mat-form-field>
                                <!-- Botones de Accion -->
                <!-- <div class="button-row">
                    <button mat-raised-button color="primary" type="submit" (click)=onSubmit() [disabled]="this.PrtgServiceForm.EquipoForm.invalid">Guardar</button>&nbsp;
                    <button mat-raised-button color="warn" (click)="onClear(this.PrtgServiceForm.EquipoForm.get('id_equipo').value)">Limpiar</button>
                </div> -->
            </div>
        </mat-grid-tile>

        <!-- <mat-grid-tile rowspan="2" >
                <div class="button-row">
                    <button mat-raised-button color="primary" type="submit" (click)=onSubmit() [disabled]="this.PrtgServiceForm.EquipoForm.invalid">Guardar</button>&nbsp;
                    <button mat-raised-button color="warn" (click)="onClear(this.PrtgServiceForm.EquipoForm.get('id_equipo').value)">Limpiar</button>
                </div>
        </mat-grid-tile> -->
    </mat-grid-list>
    <mat-grid-list cols = "2">
                <!-- <div class="button-row"> -->
                    <button mat-raised-button color="primary" type="submit" (click)=onSubmit() [disabled]="this.PrtgServiceForm.EquipoForm.invalid">Guardar</button>&nbsp;
                    <button mat-raised-button color="warn" (click)="onClear(this.PrtgServiceForm.EquipoForm.get('id_equipo').value)">Limpiar</button>
                <!-- </div> -->
    </mat-grid-list>

</form>