ad.component.html

app-menu></app-menu>
  
    <h3 class="text-center">Publish Course</h3>
  <form [formGroup]="vForm">
    <div class="form">
      <label for="usr">Cour Name: </label>
      <input type="text" formControlName="name" class="form-control" id="name" required>
      <div *ngIf="vForm.controls['name'].errors && !vForm.controls['name'].pristine" class="error-msg">
        <div [hidden]="!vForm.controls['name'].errors.required">Name is required.</div>
      </div>
    </div>
    <div class="form-group col-sm-12">
      <label for="usr">Link: </label>
      <input type="text" formControlName="URL" class="form-control" id="URL" required>
    </div>
    <div class="form-group col-sm-12">
      <label for="usr">Embed: </label>
      <input type="text" formControlName="em" class="form-control-file" id="em" required>
    </div>
    
    <div class="form-group col-sm-12">
        <label for="usr">Choose file to Upload </label>
        <input type="file" multiple formControlName="file" class="form-control" id="file" (change)="handleFileInput($event.target.files)" accept=".pdf,.docx" required>
      </div>
    
    <div class="form-group col-sm-12">
      <label for="usr">Q: </label>
      <input type="text" formControlName="q1" class="form-control" id="q1" required>
    </div>
    <div class="form-group col-sm-6">
      <label for="usr">Op A: </label>
      <input type="text" formControlName="Opa" class="form-control" id="Opa" required>
    </div>

    <div class="form-group col-sm-6">
      <label for="usr">Op B: </label>
      <input type="text" formControlName="Opb" class="form-control" id="Opb" required>
    </div>

    <div class="form-group col-sm-6">
      <label for="usr">Op C: </label>
      <input type="text" formControlName="Optc1" class="form-control" id="Opc" required>
    </div>

    <div class="form-group col-sm-6">
      <label for="usr">Op D: </label>
      <input type="text" formControlName="Opd" class="form-control" id="Opd" required>
    </div>

    <div class="form-group col-sm-6">
      <label for="usr">Correct: </label>
      <input type="text" formControlName="an1" class="form-control" id="an1" required>
    </div>

    <button type="submit" [disabled]="vForm.invalid" class="btn btn-info" (click)="publish()">Publish</button>
  </form>

  <h3 class="text-center">Publish Quiz</h3>
    <form [formGroup]="Quiz_Form">
      <div class="form">
        <label for="usr"> Name1: </label>
        <input type="text" formControlName="cour_name" class="form-control" id="cour_name" required>
        <div *ngIf="Q_Form.controls['cour_name'].errors && !Q_Form.controls['cour_name'].pristine" class="error-msg">
          <div [hidden]="!Q_Form.controls['cour_name'].errors.required">Name is required.</div>
        </div>
      </div>
      
    <div class="form">
      <label for="usr"> Name2: </label>
        <input type="text" formControlName="q_name" class="form-control" id="q_name" required>
        <div *ngIf="Q_Form.controls['q_name'].errors && !Q_Form.controls['q_name'].pristine" class="error-msg">
          <div [hidden]="!Q_Form.controls['q_name'].errors.required">Name is required.</div>
        </div>
    </div>

      <div class="form-group col-sm-12">
        <label for="usr">Q: </label>
        <input type="text" formControlName="q1" class="form-control" id="q1" required>
      </div>
      <div class="form-group col-sm-6">
        <label for="usr">Op A: </label>
        <input type="text" formControlName="Opa" class="form-control" id="Opa" required>
      </div>
  
      <div class="form-group col-sm-6">
        <label for="usr">Op B: </label>
        <input type="text" formControlName="Opb" class="form-control" id="Opb" required>
      </div>
  
      <div class="form-group col-sm-6">
        <label for="usr">Op C: </label>
        <input type="text" formControlName="Opc" class="form-control" id="Opc" required>
      </div>
  
      <div class="form-group col-sm-6">
        <label for="usr">Op D: </label>
        <input type="text" formControlName="Opd" class="form-control" id="Opd" required>
      </div>
  
      <div class="form-group col-sm-6">
        <label for="usr">Correct: </label>
        <input type="text" formControlName="an1" class="form-control" id="an1" required>
      </div>
      <button type="submit" [disabled]="Q_Form.invalid" class="btn btn-info" (click)="publishQ()">Publish</button>
    </form>
  
    <h3 class="text-center">Publish Document</h3>
    <form [formGroup]="D_Form">
      <div class="form">
        <label for="usr">Course Name: </label>
        <input type="text" formControlName="cour_name" class="form-control" id="cour_name" required>
        <div *ngIf="Qu_Form.controls['cour_name'].errors && !Quiz_Form.controls['cour_name'].pristine" class="error-msg">
          <div [hidden]="!Q_Form.controls['cour_name'].errors.required">Name is required.</div>
        </div>
      </div>
    
    <div class="form-group col-sm-12">
      <label for="usr">Choose file to Upload </label>
      <input type="file" multiple formControlName="file" class="form-control" id="file" (change)="handleFileInput($event.target.files)" accept=".pdf,.docx" required>
    </div>
    <button type="submit" [disabled]="D_Form.invalid" class="btn btn-info" (click)="publishD()">Publish</button>
  </form>

  <!-- <p>Form value: {{ vForm.value | json }}</p> -->
  <!--<button><input id="File-field" name="File-Field" change=uploadFile($event) type="file" accept=".pdf,.docx"> Upload</button>-->
  
</div>