Question

如果表单无效/有效，我想相应地禁用/启用导航到另一个选项卡。以下是我的代码段

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>

不幸的是，我在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!

经过大量研究，看来我需要在disableControl元素上设置matTabLabel而不是像我一样在@Input上设置。 matTabLabel接受两个参数templateRef: TemplateRef<C>和viewContainerRef: ViewContainerRef。现在的挑战是在设置控件时将参数传递给标签

Answer 1

如果要禁用制表符，请使用ngStyle指令。从标签中删除disablecontrol指令

<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

formcontrols需要一个表单，mat-tab是否在表单中？
您可以简单地使用[disable] =“！PDform.valid”

在角度5的表单组上设置禁用控件

2 个答案: