Question

我正在尝试验证表单link。条件非常简单，当输入字段无效时，save按钮将被禁用，当所有输入字段有效时，将启用/显示SAVE按钮。＆＃39;添加＆＃39;工作正常，但更新＆＃39;工作不正常。＆＃39; SAVE＆＃39;当所有输入字段都有效时，按钮没有显示，我不确定原因。

＆＃13;

<!--upd-->
<div *ngIf="updateEnable" align="center">
  <form align="center" ngNativeValidate>
    id: <input disabled name="id" #updId="ngModel" [value]="selectedStudent.id" [(ngModel)]="selectedStudent.id" class="form-control" required/>

    <br> name: <input name="name" #updName="ngModel" [value]="selectedStudent.name" [(ngModel)]="selectedStudent.name" class="form-control" required [rangeLength]="[3, 30]" />{{updName.valid}}, {{updName.touched}}, {{updName.pristine}}
    <p *ngIf="updName.invalid || updName.errors?.rangeLength">Name must be filled and must 3-30 char</p>

    <br> year: <input name="year" #updYear="ngModel" [value]="selectedStudent.year" [(ngModel)]="selectedStudent.year" class="form-control" required digits/>{{updYear.valid}}, {{updYear.touched}}, {{updYear.pristine}}
    <p *ngIf="updYear.invalid || updYear.errors?.digits">Year must be filled and must number</p>

    <br> semester: <input name="semester" #updSemester="ngModel" [value]="selectedStudent.semester" [(ngModel)]="selectedStudent.semester" class="form-control" required digits/>{{updSemester.valid}}, {{updSemester.touched}}, {{updSemester.pristine}}
    <p *ngIf="updSemester.invalid || updSemester.errors?.digits">Semester must be filled and must number</p>

    <br>Major:
    <select name="major" #updMajor="ngModel" [value]="selectedStudent.major" [(ngModel)]="selectedStudent.major" class="form-control" required>{{updMajor.valid}}
              <option class="form-control" value="Computer Science">Computer Science</option>
              <option class="form-control" value="Politic">Politic</option>
              <option class="form-control" value="Accounting">Accounting</option>  
            </select>
    <p *ngIf="updMajor.invalid">Major must be filled</p>

    <br> score: <input name="score" #updScore="ngModel" [value]="selectedStudent.score" [(ngModel)]="selectedStudent.score" class="form-control" required digits [range]="[0, 101]" />{{updScore.valid}}, {{updScore.touched}}, {{updScore.pristine}}
    <p *ngIf="updScore.invalid || updScore.errors?.digits || updScore.errors?.range">Score must be filled,0 must number, and between 0-100</p>

    <br> email: <input name="email" #updEmail="ngModel" [value]="selectedStudent.email" [(ngModel)]="selectedStudent.email" class="form-control" required email/>{{updEmail.valid}}, {{updEmail.touched}}, {{updEmail.pristine}}
    <p *ngIf="updEmail.invalid || updEmail.errors?.email">Email must be filled and must contains @ and domain</p>
    <br>

    <div *ngIf="updId.invalid || updName.invalid || updYear.invalid || updSemester.invalid || updMajor.invalid || updScore.invalid || updEmail.invalid">
      <button disabled class="btn btn-warning" title="can not save, please check error message above" type="button" (click)="updStudent(updId.value , updName.value, updYear.value, updSemester, updMajor.value , updScore.value, updEmail.value)" data-dismiss="modal">SAVE</button>
    </div>

    <div *ngIf="updId.valid && updName.valid && updYear.valid && updSemester.valid && updMajor.valid && updScore.valid && updEmail.valid">
      <button disabled class="btn btn-warning" type="button" (click)="updStudent(updId.value , updName.value, updYear.value, updSemester, updMajor.value , updScore.value, updEmail.value)" data-dismiss="modal">SAVE</button>
    </div>

    <button class="btn btn-secondary" #notSaved type="button" data-dismiss="modal">CANCEL</button>

  </form>
</div>

＆＃13;

以下是插入数据正常工作的表单。

＆＃13;

<form align="center" ngNativeValidate>       
        ID: 
        <input #newId="ngModel" name="id" class="form-control" [(ngModel)]="newId.value" required digits/>Valid?{{newId.valid}}, Clean?{{newId.pristine}}, Touched?{{newId.touched}}
        <p *ngIf="newId.invalid || newId.errors?.digits">ID must be filled and must numbers</p>

        <br>Name: 
        <input #newName="ngModel" name="name" class="form-control" [(ngModel)]="newName.value" required [rangeLength]="[3, 30]"/>Valid?{{newName.pristine}}, Clean?{{newName.pristine}}, Touched?{{newName.touched}}
        <p *ngIf="newName.invalid || newName.errors?.rangeLength">Name must be filled and must 3-30 chars</p>
        
        <br>Year: 
        <input #newYear="ngModel" name="year" class="form-control" [(ngModel)]="newYear.value" required digits/>Valid?{{newYear.valid}}, Clean?{{newYear.pristine}}, Touched?{{newYear.touched}}
        <p *ngIf="newYear.invalid || newYear.errors?.digits">Year must be filled and must numbers</p>

        <br>Semester:
        <input #newSemester="ngModel" name="semester" class="form-control" [(ngModel)]="newSemester.value" required digits/>Valid?{{newSemester.valid}}, Clean?{{newSemester.pristine}}, Touched?{{newSemester.touched}}
        <p *ngIf="newSemester.invalid || newSemester.errors?.digits">Semester must be filled and must numbers</p>
        
        <br>Major:
        <select #newMajor="ngModel" name="major" [(ngModel)]="newMajor.value" class="form-control" required>Valid?{{newMajor.valid}}, Clean?{{newMajor.pristine}}, Touched?{{newMajor.touched}}
          <option value="Computer Science">Computer Science</option>
          <option value="Politic">Politic</option>
          <option value="Accounting">Accounting</option>  
        </select>
        <p *ngIf="newMajor.invalid">Major must be filled</p>

        <br>Score: 
        <input #newScore="ngModel" name="score" class="form-control" [(ngModel)]="newScore.value" required digits [range]="[0, 101]">Valid?{{newScore.valid}}, Clean?{{newScore.pristine}}, Touched?{{newScore.touched}}
        <p *ngIf="newScore.invalid || newScore.errors?.digits || newScore.errors?.range">Score must be filled, must numbers, and must between 0-100</p>

        <br>Email:
        <input #newEmail="ngModel" name="email" class="form-control" [(ngModel)]="newEmail.value" required email/>Valid?{{newEmail.valid}}, Clean?{{newEmail.pristine}}, Touched?{{newEmail.touched}}
        <p *ngIf="newEmail.invalid || newEmail.errors?.email">Email must contains @ and domain</p>

          <!--jika kondisi invalid-->
          <div *ngIf="newId.invalid || newName.invalid || newYear.invalid || newSemester.invalid || newMajor.invalid || newScore.invalid || newEmail.invalid">
            <br><button disabled title="can not save, please check error message above" class="btn btn-primary" type="submit" (click)="addStudent(newId.value, newName.value, newYear.value, newSemester.value, newMajor.value, newScore.value, newEmail.value)">SAVE</button>
          </div>
    
          <!--Jika kondisi valid-->
          <div *ngIf="newId.valid && newName.valid && newYear.valid && newSemester.valid && newMajor.valid && newScore.valid && newEmail.valid">
            <br><button class="btn btn-primary" type="submit" (click)="addStudent(newId.value, newName.value, newYear.value, newSemester.value, newMajor.value, newScore.value, newEmail.value)" data-dismiss="modal">SAVE</button>	
          </div>

          <button class="btn btn-secondary" data-dismiss="modal">CANCEL</button>

          </form>
		
		
		<div *ngIf="updateEnable" align="center">
            <form align="center" ngNativeValidate>
            id: <input disabled name="id" #updId="ngModel" [value]="selectedStudent.id" [(ngModel)]="selectedStudent.id" class="form-control" required/>
        
            <br>
            name: <input name="name" #updName="ngModel" [value]="selectedStudent.name" [(ngModel)]="selectedStudent.name" class="form-control" required [rangeLength]="[3, 30]"/>{{updName.valid}}, {{updName.touched}}, {{updName.pristine}}
            <p *ngIf="updName.invalid || updName.errors?.rangeLength">Name must be filled and must 3-30 char</p>
        
            <br>
            year: <input name="year" #updYear="ngModel" [value]="selectedStudent.year" [(ngModel)]="selectedStudent.year" class="form-control" required digits/>{{updYear.valid}}, {{updYear.touched}}, {{updYear.pristine}}
            <p *ngIf="updYear.invalid || updYear.errors?.digits">Year must be filled and must number</p>  

            <br>
            semester: <input name="semester" #updSemester="ngModel" [value]="selectedStudent.semester" [(ngModel)]="selectedStudent.semester" class="form-control" required digits/>{{updSemester.valid}}, {{updSemester.touched}}, {{updSemester.pristine}}
            <p *ngIf="updSemester.invalid || updSemester.errors?.digits">Semester must be filled and must number</p>
        
            <br>Major:
            <select name="major" #updMajor="ngModel" [value]="selectedStudent.major" [(ngModel)]="selectedStudent.major" class="form-control" required>{{updMajor.valid}}
              <option class="form-control" value="Computer Science">Computer Science</option>
              <option class="form-control" value="Politic">Politic</option>
              <option class="form-control" value="Accounting">Accounting</option>  
            </select>
            <p *ngIf="updMajor.invalid">Major must be filled</p>
        
            <br>
            score: <input name="score" #updScore="ngModel" [value]="selectedStudent.score" [(ngModel)]="selectedStudent.score" class="form-control" required digits [range]="[0, 101]"/>{{updScore.valid}}, {{updScore.touched}}, {{updScore.pristine}}
            <p *ngIf="updScore.invalid || updScore.errors?.digits || updScore.errors?.range">Score must be filled,0 must number, and between 0-100</p>

            <br>
            email: <input name="email" #updEmail="ngModel" [value]="selectedStudent.email" [(ngModel)]="selectedStudent.email" class="form-control" required email/>{{updEmail.valid}}, {{updEmail.touched}}, {{updEmail.pristine}}
            <p *ngIf="updEmail.invalid || updEmail.errors?.email">Email must be filled and must contains @ and domain</p>
            <br>

            <div *ngIf="updId.invalid || updName.invalid || updYear.invalid || updSemester.invalid || updMajor.invalid || updScore.invalid || updEmail.invalid">
              <button disabled class="btn btn-warning" title="can not save, please check error message above" type="button" (click)="updStudent(updId.value , updName.value, updYear.value, updSemester, updMajor.value , updScore.value, updEmail.value)" data-dismiss="modal">SAVE</button>
            </div>

            <div *ngIf="updId.valid && updName.valid && updYear.valid && updSemester.valid && updMajor.valid && updScore.valid && updEmail.valid">
              <button disabled class="btn btn-warning" type="button" (click)="updStudent(updId.value , updName.value, updYear.value, updSemester, updMajor.value , updScore.value, updEmail.value)" data-dismiss="modal">SAVE</button>
            </div>
            
            <button class="btn btn-secondary" #notSaved type="button" data-dismiss="modal">CANCEL</button> 

            </form>
        </div>

＆＃13;

如果需要更多代码段，请与我们联系。谢谢。

Answer 1

通过将updId.valid更改为selectedStudent.id.value == valid来计算出来。我不改变其余部分并且它有效：D。

如果输入字段无效，则会禁用保存按钮;如果所有输入字段都有效，则会启用保存按钮。

＆＃13;

<span *ngIf="selectedStudent.id.value == valid && updName.valid && updYear.valid && updSemester.valid && updMajor.valid && updScore.valid && updEmail.valid">
              <button class="btn btn-warning" type="button" (click)="updStudent(updId.value, updName.value, updYear.value, updSemester.value, updMajor.value, updScore.value, updEmail.value)" data-dismiss="modal">SAVE</button>
            </span>

＆＃13;

当所有输入条件有效时，角度按钮不会出现

1 个答案: