Set disable control on formgroup in angular 5

Question

I want to disable/enable navigation to another tab accordingly if the form is invalid/valid. Below is my code snippet

component.ts

    @Directive({
       selector: '[disableControl]'
    })

    export class ApplicationComponent implements OnInit, AfterViewInit, OnDestroy {
    [...]
    constructor(private _formBuilder: FormBuilder, public dialog: MatDialog, public _DomSanitizer: DomSanitizer,  public state: StatesService, public lga: LgasService, private http: HttpClient, private ngControl : NgControl) {

        [...]
        //setControl
        @MatTabLabel(parameters) set disableControl( condition : boolean ) {
           const action = condition ? 'disable' : 'enable';
           this.ngControl.control[action]();
        }
        [...]
        this.PDform = _formBuilder.group({
           surname: ['', Validators.required],
           firstName': ['', Validators.required],
           middleName: [''],
           gender: ['', Validators.required],
           maritalStatus: ['', Validators.required],
           highestQualification : ['', Validators.required],
           nationality: ['', Validators.required],
           [...]
        })
        this.NOKform = _formBuilder.group({
           nextOfKinTitle: ['', Validators.required],
           nextOfKinSurname: ['', Validators.required],
           nextOfKinFirstName: ['', Validators.required],
           nextOfKinMiddleName : [''],
           nextOfKinGender: ['', Validators.required],
           nextOfKinRelationship: ['', Validators.required],
           nextOfKinZipCode: ['', Validators.maxLength(6)],
           [...]
        })
      }
    }

app.module.ts

    NgModule({
       [...]
       imports: [
          FormsModule,
          ReactiveFormsModule
       ]
       [...]
    })

html:

    <mat-tab label="Personal Details" class=tabHeading">
       <form [formGroup]="PDform">
          [...]
          <mat-form-field appearance="outline">
             <mat-label><span class="required">*&nbsp;</span>Surname</mat-label>
                   <input  [(ngModel)]="surname" formControlName="surname" matInput>
          </mat-form-field>
          <mat-form-field appearance="outline">
             <mat-label><span class="required">*&nbsp;</span> FirstName</mat-label>
                   <input  [(ngModel)]="firstName" formControlName=" firstName" matInput>
          </mat-form-field>
          <mat-form-field appearance="outline">
             <mat-label>Middle name</mat-label>
             <input [(ngModel)]="middleName" formControlName="middleName" matInput>
          </mat-form-field>
          <mat-form-field>
             <mat-select [(ngModel)]="gender" formControlName="gender" placeholder="* Gender">
               <mat-option value="">Select</mat-option>
               <mat-option value="M">Male</mat-option>
               <mat-option value="F">Female</mat-option>
             </mat-select>
          </mat-form-field>
          <mat-form-field>
             <mat-select [(ngModel)]="maritalStatus" formControlName="maritalStatus" placeholder="* Marital Status">
                <mat-option value="">Select</mat-option>
                <mat-option value="S">Single</mat-option>
                <mat-option value="M">Married</mat-option>
                <mat-option value="D">Divorced</mat-option>
                <mat-option value="SP">Separated</mat-option>
                <mat-option value="W">Widowed</mat-option>
             </mat-select> 
             [...]
         </mat-form-field>
       </form>
    </mat-tab>
    <mat-tab label="Employment Record" class=tabHeading [disableControl]="PDform.valid ? enable : disable">
       <form [formGroup]="NOKform">
          [...]
          <mat-form-field>
             <mat-select [(ngModel)]="nextOfKinTitle" formControlName="nextOfKinTitle" placeholder="Title">
                <mat-option value="">Select</mat-option>
                <mat-option value="MR">Mr</mat-option>
                <mat-option value="MRS">Mrs</mat-option>
                <mat-option value="MISS">Miss</mat-option>
             </mat-select>
          </mat-form-field>
          <mat-form-field appearance="outline">
             <mat-label><span class="required">*&nbsp;</span>Surname</mat-label>
                   <input  [(ngModel)]="nextOfKinSurname" formControlName="nextOfKinSurname" matInput>
          </mat-form-field>
          <mat-form-field appearance="outline">
             <mat-label><span class="required">*&nbsp;</span> FirstName</mat-label>
                   <input  [(ngModel)]="nextOfKinFirstName" formControlName="nextOfKinFirstName" matInput>
          </mat-form-field>
          <mat-form-field appearance="outline">
             <mat-label>Middle name</mat-label>
             <input [(ngModel)]="nextOfKinMiddleName" formControlName="middleName" matInput>
          </mat-form-field>
          <mat-form-field>
             <mat-select [(ngModel)]="nextOfKinGender" formControlName="nextOfKinGender" placeholder="* Gender">
               <mat-option value="">Select</mat-option>
               <mat-option value="M">Male</mat-option>
               <mat-option value="F">Female</mat-option>
             </mat-select>
          </mat-form-field>
          <mat-form-field>
             <mat-select [(ngModel)]="nextOfKinMaritalStatus" formControlName="nextOfKinMaritalStatus" placeholder="* Marital Status">
                <mat-option value="">Select</mat-option>
                <mat-option value="S">Single</mat-option>
                <mat-option value="M">Married</mat-option>
                <mat-option value="D">Divorced</mat-option>
                <mat-option value="SP">Separated</mat-option>
                <mat-option value="W">Widowed</mat-option>
             </mat-select>
          </mat-form-field> 
          [...]
       </form>
    </mat-tab>

Unfortunately, i'm getting this error on init

    ERROR Error: Uncaught (in promise): Error: 
    StaticInjectorError(AppModule)[MatInput -> NgControl]: 
    StaticInjectorError(Platform: core)[MatInput -> NgControl]: 
    NullInjectorError: No provider for NgControl!
    Error: StaticInjectorError(AppModule)[MatInput -> NgControl]: 
    StaticInjectorError(Platform: core)[MatInput -> NgControl]: 
    NullInjectorError: No provider for NgControl!

After much research, it appears I need to set the disableControl on matTabLabel element and not on @Input like i did. matTabLabel accepts two parameters templateRef: TemplateRef<C> and viewContainerRef: ViewContainerRef. The challenge now is to pass the parameters to the label when setting up the control

Answer 1

If you want to disable tab use ngStyle directive. Remove disablecontrol directive from your tab

<mat-tab label="Personal Details" class=tabHeading">
   <form [formGroup]="PDform">
      [...]
   </form>
</mat-tab>
<mat-tab label="Employment Record" class=tabHeading [ngStyle]="{'pointer-events'   PDform.valid ? 'auto'  : 'none' }">
   <form [formGroup]="NOKform">
       [...]
   </form>
</mat-tab>

Answer 2

1. formcontrols require a form, is mat-tab in a form?
2. you can simply use [disable]="!PDform.valid"