Angular 角度7：根据填充的表单字段数量启用和禁用按钮

我对angular 7非常陌生，我想到了一个情况，我有两个按钮：

提交

检查

当填写3个表单字段时，我必须启用

检查按钮

，即

semester, branch and subject

semester, branch and subject, image

另一方面，我想启用提交按钮时，所有4个字段都已填写，即

semester, branch and subject

semester, branch and subject, image

我正在使用来自验证的

FromValidation

，在填写4个字段时可以成功启用

submit

按钮，现在的问题是如何在填写3个表单字段时启用

check按钮

component.html

<app-teacher-header></app-teacher-header>
<div class="container">
  <div class="row">
    <div class="col-sm-12" *ngIf="!checkAssignment">
        <form>
            <div class="form-group">
                <label for="exampleInputEmail1">Name</label>
                <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" 
                [(ngModel)]="assignment.name" name="name" [value]="assignment.name" disabled>
              </div>

              <!-----------------SEMESTER  ----------------------->
              <div class="form-group" #userform="ngForm" [formGroup]="assignmentUploadValidation">
                  <mat-form-field>
                      <mat-select [(ngModel)]="assignment.semester" name="semester"
                      formControlName="semester">
                        <mat-option *ngFor="let semester of semesters" [value]="semester.semester">
                            {{semester.semester}}
                        </mat-option>
                      </mat-select>
                      <div *ngIf="(validations.semester.invalid && validations.semester.touched) || validations.semester.dirty">
                        <small *ngIf="validations.semester.errors?.required" class="text-danger">Subject is required</small>
                      </div>
                    </mat-form-field>
              </div>
              <!----------------- /SEMESTER  ----------------------->


              <!-----------------BRANCH  ----------------------->

            <div class="form-group" #userform="ngForm" [formGroup]="assignmentUploadValidation">
              <mat-form-field>
                <mat-label>Select Branch</mat-label>
                <mat-select [(ngModel)]="assignment.branch"  [(ngModel)]="teacher.branch" name="branch" formControlName="branch"
                (openedChange)="branchChanges($event)">
                  <mat-option *ngFor="let branch of branchs" [value]="branch.branch">
                    {{branch.branch}}
                  </mat-option>
                </mat-select>
                <div *ngIf="(validations.branch.invalid && validations.branch.touched) || validations.branch.dirty">
                  <small *ngIf="validations.branch.errors?.required" class="text-danger">Branch is required</small>
                </div>
              </mat-form-field>
            </div>
            <!-----------------/BRANCH  -----------------------> 

              <div class="form-group" #userform="ngForm" [formGroup]="assignmentUploadValidation">
                  <mat-form-field>
                      <mat-select [(ngModel)]="assignment.subject" [(ngModel)]="teacher.subject" name="subject"
                      formControlName="subject">
                        <mat-option *ngFor="let subject of subjects" [value]="subject.subject">
                            {{subject.subject}}
                        </mat-option>
                      </mat-select>
                      <div *ngIf="(validations.subject.invalid && validations.subject.touched) || validations.subject.dirty">
                        <small *ngIf="validations.subject.errors?.required" class="text-danger">Branch is required</small>
                      </div>
                    </mat-form-field>
              </div>

              <div class="form-group"  #userform="ngForm" [formGroup]="assignmentUploadValidation">
                <input type="file" name="image" (change)="onFileSelect($event)" formControlName="image">
                <div *ngIf="(validations.image.invalid && validations.image.touched) || validations.image.dirty">
                  <small *ngIf="validations.image.errors?.required" class="text-danger">Branch is required</small>
                </div>
              </div>


              <button type="submit" class="btn btn-primary" (click)="onUpload()" [disabled]="userform.invalid">Submit</button>
    </form>
    </div>
    <div class="col-sm-12">
        <app-check-assignment *ngIf="checkAssignment" 
        [receivedFromTeacherAssignment]="recivedAssignment" [justMsg]="parentMsg"></app-check-assignment>
        <div>
          <button class="btn btn-primary" (click)="onCheckAssignment()">check</button>
        </div>
    </div>

  </div>
</div>

试一试

检查

您可以使用FormControl类中的

valueChanges:Observable

来跟踪字段的更改，以及当字段具有值时，单击“检查”按钮