为什么NgForm对象为有效和无效属性提供了不正确的值

Question

我是一个角度初学者，如果表单无效，我想禁用提交按钮，并在表单生效后启用它。 我使用NgForm变量来获取表单有效性状态：

<form #currencyForm="ngForm">

// some input elements with sync validations and async validations
// some disabled elements with no validation at all (just default values)

<button mat-raised-button color="primary" type="submit"  [disabled]="currencyForm.invalid" (click)=submitClicked(currencyForm)>Submit</button>
</form>

用于记录currencyForm对象的submitClicked()方法，请注意有效\ invalid属性的值：

虽然表单如下所示：

因此表单无效但显示该表单的日志有效，这就是为什么始终启用提交按钮的原因。 并解决我需要了解为什么表单值无效.. 谢谢你的头脑

更新，表格代码：

<form class="example-form" #currencyForm="ngForm" >
    <mat-dialog-content>
      <div class="example-container">
          <mat-form-field>
            <input type="text" matInput #currency_name maxlength="30" placeholder="Currency Name" required [(ngModel)]="currency.name" name="name" [formControl]="nameFormControl" >
            <mat-hint align="end">{{currency_name.value?.length || 0}}/30</mat-hint>
                <mat-error *ngIf="nameFormControl.invalid && (nameFormControl.dirty || nameFormControl.touched)">{{getNameErrorMessage()}}</mat-error>  

            </mat-form-field>

          <mat-form-field>
            <input type="text" matInput #currency_symbol maxlength="3" placeholder="Symbol" required [(ngModel)]="currency.symbol" name="symbol" [formControl]="symbolFormControl">
            <mat-hint align="end">{{currency_symbol.value?.length || 0}}/3</mat-hint>
            <mat-error *ngIf="symbolFormControl.invalid && (symbolFormControl.dirty || symbolFormControl.touched)">{{getSymbolErrorMessage()}}</mat-error>
          </mat-form-field>

          <mat-form-field>
            <input  matInput #decimals maxlength="1" placeholder="Decimals after point" required [(ngModel)]="currency.decimals_after_point" name="decimals_after_point" [formControl] = "decimalsFormControl">
            <mat-hint align="end">{{decimals.value?.length || 0}}/1</mat-hint>
            <mat-error *ngIf="decimalsFormControl.invalid && (decimalsFormControl.dirty || decimalsFormControl.touched)">{{getDAPErrorMessage()}}</mat-error>
          </mat-form-field>
 </div>

    <section class="example-section">

        <mat-checkbox  [disabled]="true" [value]="data.functional_currency_exist" [checked] = "data.functional_currency_exist" >Operational</mat-checkbox>

    </section>
 </mat-dialog-content>
    <mat-dialog-actions>
    <div class="button-row">
         <button mat-raised-button color="primary" type="submit"  [disabled]="currencyForm.invalid" (click)="submitClicked(currencyForm)">Submit</button>
         <button mat-raised-button color="accent" (click) = "closePanel()">Cancel</button>
    </div>
    </mat-dialog-actions>
    </form>

Answer 1

以这种方式试试。

[disabled]="!currencyForm.valid"

而不是这样做

[disabled]="currencyForm.invalid" 

我记得我曾经遇到过与上述相同的问题。并按我的方式解决它。对不起，但由于没有更多细节，我无法详细解释。不知怎的，无效标志不能正常工作但有效。