title: Angular 7: Enabel and Disable buttons according to number to form fields filled
body: <p>I very new to <code>angular 7</code> and I came up with a situation where I have two buttons :</p>
  
  <ol>
  <li>submit</li>
  <li>Check</li>
  </ol>
  
  <p>I have to enable <code>check button</code> when 3 form fields are filled i.e </p>
  
  <pre><code>semester, branch and subject
  </code></pre>
  
  <p>on the other hand I want to enable submit button when all the 4 fields are filled i.e </p>
  
  <pre><code>semester, branch and subject, image
  </code></pre>
  
  <p>I am using <code>FromValidation</code> and can successfully enable the <code>submit</code> button when 4 fields are filled, now the problem is how to enable the <code>check button</code> when 3 form fields are filled</p>
  
  <p><strong>component.html</strong></p>
  
  <pre><code>&lt;app-teacher-header&gt;&lt;/app-teacher-header&gt;
  &lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-sm-12" *ngIf="!checkAssignment"&gt;
          &lt;form&gt;
              &lt;div class="form-group"&gt;
                  &lt;label for="exampleInputEmail1"&gt;Name&lt;/label&gt;
                  &lt;input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" 
                  [(ngModel)]="assignment.name" name="name" [value]="assignment.name" disabled&gt;
                &lt;/div&gt;
  
                &lt;!-----------------SEMESTER  -----------------------&gt;
                &lt;div class="form-group" #userform="ngForm" [formGroup]="assignmentUploadValidation"&gt;
                    &lt;mat-form-field&gt;
                        &lt;mat-select [(ngModel)]="assignment.semester" name="semester"
                        formControlName="semester"&gt;
                          &lt;mat-option *ngFor="let semester of semesters" [value]="semester.semester"&gt;
                              {{semester.semester}}
                          &lt;/mat-option&gt;
                        &lt;/mat-select&gt;
                        &lt;div *ngIf="(validations.semester.invalid &amp;&amp; validations.semester.touched) || validations.semester.dirty"&gt;
                          &lt;small *ngIf="validations.semester.errors?.required" class="text-danger"&gt;Subject is required&lt;/small&gt;
                        &lt;/div&gt;
                      &lt;/mat-form-field&gt;
                &lt;/div&gt;
                &lt;!----------------- /SEMESTER  -----------------------&gt;
  
  
                &lt;!-----------------BRANCH  -----------------------&gt;
  
              &lt;div class="form-group" #userform="ngForm" [formGroup]="assignmentUploadValidation"&gt;
                &lt;mat-form-field&gt;
                  &lt;mat-label&gt;Select Branch&lt;/mat-label&gt;
                  &lt;mat-select [(ngModel)]="assignment.branch"  [(ngModel)]="teacher.branch" name="branch" formControlName="branch"
                  (openedChange)="branchChanges($event)"&gt;
                    &lt;mat-option *ngFor="let branch of branchs" [value]="branch.branch"&gt;
                      {{branch.branch}}
                    &lt;/mat-option&gt;
                  &lt;/mat-select&gt;
                  &lt;div *ngIf="(validations.branch.invalid &amp;&amp; validations.branch.touched) || validations.branch.dirty"&gt;
                    &lt;small *ngIf="validations.branch.errors?.required" class="text-danger"&gt;Branch is required&lt;/small&gt;
                  &lt;/div&gt;
                &lt;/mat-form-field&gt;
              &lt;/div&gt;
              &lt;!-----------------/BRANCH  -----------------------&gt; 
  
                &lt;div class="form-group" #userform="ngForm" [formGroup]="assignmentUploadValidation"&gt;
                    &lt;mat-form-field&gt;
                        &lt;mat-select [(ngModel)]="assignment.subject" [(ngModel)]="teacher.subject" name="subject"
                        formControlName="subject"&gt;
                          &lt;mat-option *ngFor="let subject of subjects" [value]="subject.subject"&gt;
                              {{subject.subject}}
                          &lt;/mat-option&gt;
                        &lt;/mat-select&gt;
                        &lt;div *ngIf="(validations.subject.invalid &amp;&amp; validations.subject.touched) || validations.subject.dirty"&gt;
                          &lt;small *ngIf="validations.subject.errors?.required" class="text-danger"&gt;Branch is required&lt;/small&gt;
                        &lt;/div&gt;
                      &lt;/mat-form-field&gt;
                &lt;/div&gt;
  
                &lt;div class="form-group"  #userform="ngForm" [formGroup]="assignmentUploadValidation"&gt;
                  &lt;input type="file" name="image" (change)="onFileSelect($event)" formControlName="image"&gt;
                  &lt;div *ngIf="(validations.image.invalid &amp;&amp; validations.image.touched) || validations.image.dirty"&gt;
                    &lt;small *ngIf="validations.image.errors?.required" class="text-danger"&gt;Branch is required&lt;/small&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
  
  
                &lt;button type="submit" class="btn btn-primary" (click)="onUpload()" [disabled]="userform.invalid"&gt;Submit&lt;/button&gt;
      &lt;/form&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-12"&gt;
          &lt;app-check-assignment *ngIf="checkAssignment" 
          [receivedFromTeacherAssignment]="recivedAssignment" [justMsg]="parentMsg"&gt;&lt;/app-check-assignment&gt;
          &lt;div&gt;
            &lt;button class="btn btn-primary" (click)="onCheckAssignment()"&gt;check&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>component.ts</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Teacher } from 'src/app/shared/teacher.model';
  import { TeachersService } from '../teachers.service';
  import { SharedService } from 'src/app/shared/shared.service';
  import { FormGroup, FormControl, Validators } from '@angular/forms';
  
  export interface Assignment {
    name: string,
    semester : number,
    branch: string,
    subject: string,
    image: string
  }
  
  @Component({
    selector: 'app-teacher-assignment',
    templateUrl: './teacher-assignment.component.html',
    styleUrls: ['./teacher-assignment.component.css']
  })
  export class TeacherAssignmentComponent implements OnInit {
    private teacher = Teacher
    private recivedAssignment : {name: string, assignment: string}
    semesters = []
    branchs = [];
  
    subjects = [];
  
    checkAssignment = false;
    parentMsg : string = '';
    assignment : Assignment = {
      name: "",
      semester: null,
      branch: "",
      subject: "",
      image: ""
    }
  
    assignmentUploadValidation = new FormGroup({
  
       semester: new FormControl('',
       [
  
         Validators.required
       ]),
       branch: new FormControl('',[
         Validators.required
       ]),
       subject: new FormControl('', [
         Validators.required
       ]),
       image: new FormControl('', [
         Validators.required
       ])
     })
  
    constructor(private teacherServ: TeachersService, private sharedServ: SharedService) {}
  
    ngOnInit() {
    }
  
    get validations() {
      return this.assignmentUploadValidation.controls;
    }
  
  
    onUpload() {
      const fd = new FormData();
      for( var key in this.assignment) {
        fd.append(key , this.assignment[key])
      }
  
      if(fd) {
        this.teacherServ.uploadAssignment(fd)
        .subscribe(
          res =&gt; console.log(res),
          err =&gt; console.log(err)
        )
      }
  
      console.log("assignment: ",this.assignment)
    }
  
    onCheckAssignment() {
      this.checkAssignment=!this.checkAssignment 
      console.log("THis is assignment", this.assignment)
      this.parentMsg = "demos"
      this.teacherServ.checkAssignment(this.assignment)
      .subscribe(
        res =&gt; {
          this.recivedAssignment = res.result[0]
          console.log(this.recivedAssignment)
        },
        err =&gt; console.log(err)
      )
    }
  
  }
  </code></pre>