edit-game.component.html

<!-- Main Content -->
<section class="content-wrap">
  <!-- Banner -->
  <div class="youplay-banner banner-top youplay-banner-parallax xsmall">
    <div class="image" style="background-image: url('assets/images/banner-blog-bg.jpg')"></div>
    <div class="info">
      <div>
        <div class="container">
          <h1>Game Form</h1>
        </div>
      </div>
    </div>
  </div>
  <!-- /Banner -->
  <div class="container youplay-content">
    <div class="align-right">
      <a class="btn btn-lg" role="button" (click)="goToGame()">Cancel</a>
    </div>
    <div class="col-md-12">
      <!-- Billing Information -->
      <h2 class="mt-0">Game Details</h2>

      <!-- Country -->
      <p>Categories:</p>
      <label class="youplay-select">
        <select [(ngModel)]="game.category" value="game.category">
          <option value="">Select Category</option>
          <option value="Action">Action</option>
          <option value="Adventure">Adventure</option>
          <option value="Casual">Casual</option>
          <option value="Indie">Indie</option>
          <option value="Racing">Racing</option>
          <option value="RPG">RPG</option>
          <option value="Simulation">Simulation</option>
          <option value="Strategy">Strategy</option>
        </select>
      </label>
      <div class="wrong" [class.display-div]="checkEmpty(game.category)">
        <p> Select one category! </p>
      </div>
      <div class="row">
        <div class="col-md-6">
          <p>Game Name:</p>
          <div class="youplay-input">
            <input [(ngModel)]="game.name" value="game.name" />
          </div>
          <div class="wrong" [class.display-div]="checkEmpty(game.name)">
            <p> The name cant be empty! </p>
          </div>
        </div>
        <div class="col-md-6">
          <p>Price:</p>
          <div class="youplay-input">
            <input type="number" step="0.01" [(ngModel)]="game.price" value="game.price" required />
          </div>
          <div class="wrong">
            <p> {{checkPrice()}} </p>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-4">
          <p>OS:</p>
          <div class="youplay-input">
            <input type="text" [(ngModel)]="game.os" value="game.os" />
          </div>
          <div class="wrong" [class.display-div]="checkEmpty(game.os)">
            <p> The OS cant be empty! </p>
          </div>
        </div>
        <div class="col-md-4">
          <p>Processor:</p>
          <div class="youplay-input">
            <input type="text" [(ngModel)]="game.processor" value="game.processor" />
          </div>
          <div class="wrong" [class.display-div]="checkEmpty(game.processor)">
            <p> The processor cant be empty! </p>
          </div>
        </div>
        <div class="col-md-4">
          <p>Memory:</p>
          <div class="youplay-input">
            <input type="text" [(ngModel)]="game.memory" value="game.memory" />
          </div>
          <div class="wrong" [class.display-div]="checkEmpty(game.memory)">
            <p> The Memory cant be empty! </p>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-md-6">
          <p>DirectX:</p>
          <div class="youplay-input">
            <input type="text" [(ngModel)]="game.directX" value="game.directX" />
          </div>
          <div class="wrong" [class.display-div]="checkEmpty(game.directX)">
            <p> The DirectX cant be empty! </p>
          </div>
        </div>
        <div class="col-md-6">
          <p>Network:</p>
          <div class="youplay-input">
            <input type="text" [(ngModel)]="game.network" value="game.network" />
          </div>
          <div class="wrong" [class.display-div]="checkEmpty(game.network)">
            <p> The network cant be empty! </p>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-6">
          <p>Hard Drive:</p>
          <div class="youplay-input">
            <input type="text" [(ngModel)]="game.hardDrive" value="game.hardDrive" />
          </div>
          <div class="wrong" [class.display-div]="checkEmpty(game.hardDrive)">
            <p> The Hard Drive cant be empty! </p>
          </div>
        </div>
        <div class="col-md-6">
          <p>Sound Card:</p>
          <div class="youplay-input">
            <input type="text" [(ngModel)]="game.soundCard" value="game.soundCard" />
          </div>
          <div class="wrong" [class.display-div]="checkEmpty(game.soundCard)">
            <p> The Sound Card cant be empty! </p>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-6">
          <p>Graphic:</p>
          <div class="youplay-input">
            <input type="text" [(ngModel)]="game.graphics" value="game.graphics" />
          </div>
          <div class="wrong" [class.display-div]="checkEmpty(game.graphics)">
            <p> The Graphic cant be empty! </p>
          </div>
        </div>
      </div>

      <p>Images:</p>
      <label for="imageUpload">
        <div class="align-left">
          <a class="btn btn-lg">Gamecover Picture</a>
        </div>
      </label>
      <div class="imageInput">
        <input type="file" id='imageUpload' accept="image/jpeg,image/png" (change)="onFileSelected($event)" />
      </div>

      <label for="imageUploads">
        <div class="align-left">
          <a class="btn btn-lg">Gameplay Pictures</a>
        </div>
      </label>
      <div class="imageInput">
        <input id='imageUploads' type="file" multiple accept="image/jpeg,image/png"
          (change)="onFilesSelected($event)" />
      </div>
      <p>Description:</p>
      <div class="youplay-textarea">
        <textarea [(ngModel)]="game.description" rows="5" value="game.description"></textarea>
      </div>
      <div class="wrong" [class.display-div]="checkEmpty(game.description)">
        <p> The Description cant be empty! </p>
      </div>
      <!-- /Billing Information -->
      <div class="alert alert-danger" [class.display-div]="displayed" role="alert">
        <strong>Register form data is not correct!</strong>
      </div>
      <!-- Order Button -->
      <div class="align-right">
        <a class="btn btn-default db" (click)="edit($event)">Edit Game</a>
      </div>
      <!-- /Order Button -->
    </div>
  </div>
</section>