<form [formGroup]="angForm" novalidate>
            <div class="mdl-textfield mdl-js-textfield">
                <input class="mdl-textfield__input" type="text" id="sample1" formControlName="ProductName" #ProductName>
                <label class="mdl-textfield__label" for="sample1">Nombre del producto</label>
            </div>
            <div *ngIf="angForm.controls['ProductName'].invalid && (angForm.controls['ProductName'].dirty || angForm.controls['ProductName'].touched)"
                class="alert alert-danger">
                <div *ngIf="angForm.controls['ProductName'].errors.required">
                    Product Name is required.
                </div>
            </div>
            <br>
            <div class="mdl-textfield mdl-js-textfield">
                <textarea class="mdl-textfield__input" type="text" rows="3" id="sample5"
                    formControlName="ProductDescription" #ProductDescription></textarea>
                <label class="mdl-textfield__label" for="sample5">Descripcion del producto</label>
            </div>
            <div *ngIf="angForm.controls['ProductDescription'].invalid && (angForm.controls['ProductDescription'].dirty || angForm.controls['ProductDescription'].touched)"
                class="alert alert-danger">
                <div *ngIf="angForm.controls['ProductDescription'].errors.required">
                    Product Description is required.
                </div>
            </div>
            <br>

            <p>
                Precio
                <input id="precio" class="mdl-slider mdl-js-slider" type="range" min="0" max="20" value="0" tabindex="0"
                    formControlName="ProductPrice" #ProductPrice>
            </p>
            <div class="mdl-tooltip" data-mdl-for="precio">
                precio
            </div>
            <div *ngIf="angForm.controls['ProductPrice'].invalid && (angForm.controls['ProductPrice'].dirty || angForm.controls['ProductPrice'].touched)"
                class="alert alert-danger">
                <div *ngIf="angForm.controls['ProductPrice'].errors.required">
                    Product Price is required.
                </div>
            </div>

            <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1">
                <input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" checked>
                <span class="mdl-checkbox__label">Aceptar las condiciones ...</span>
            </label><br><br>

            <button type="submit" (click)="addProduct(ProductName.value, ProductDescription.value, ProductPrice.value)"
                class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored"
                [disabled]="angForm.pristine || angForm.invalid">
                <i class="material-icons">add</i>
            </button>
            <br><br>
        </form>