medium-ui-forms - app.component.html

<div>
  <form [formGroup]="articleFormService.articleFormModel.form" novalidate (ngSubmit)="create()">
    <label>
      Title
      <input type="text" formControlName="title" placeholder="Title">
      <span class="error" *ngIf="articleFormService?.articleFormModel?.form.get('title').touched && !articleFormService?.articleFormModel?.form.get('title').valid">
        A title is required
      </span>
    </label>
    <label>
      Description
      <textarea name="description" formControlName="description" cols="30" rows="4" placeholder="Write a short description..."></textarea>
      <span class="error" *ngIf="articleFormService?.articleFormModel?.form.get('description').touched && !articleFormService?.articleFormModel?.form.get('description').valid">
        Description needs to be at least 10 characters
      </span>
    </label>
    <label>
      Content
      <textarea name="content" formControlName="content" cols="30" rows="10" placeholder="Start writing..."></textarea>
      <span class="error" *ngIf="articleFormService?.articleFormModel?.form.get('content').touched && !articleFormService?.articleFormModel?.form.get('content').valid">
        Description needs to be at least 10 characters
      </span>
    </label>
    <label>
      <input type="checkbox" formControlName="published"> Published?
    </label>
    <div>
      <button type="submit" [disabled]="!articleFormService?.articleFormModel?.form.valid">
        {{ (succeeded | async) && response && articleFormService?.articleFormModel?.form.pristine ? 'Submitted' : 'Submit' }}
        <span *ngIf="isSending | async">loading...</span></button>
    </div>
  </form>
  
  <div>
    <button (click)="clear()">Clear form</button>
  </div>
</div>