使用 ngIf 错误时如何禁用 angular 6 中的按钮保存

Question

我在单击保存时遇到问题，错误消息“无法读取属性 'required' of null 在 Object.eval [作为 updateDirectives]

这是我的代码html

 <form name="dataForm" [formGroup]="dataForm" (ngSubmit)="onSubmit()">
        <div class="mb-24" fxLayout="row" fxLayoutAlign="start start" [ngClass]="{'has-error': ((dataForm.get('usernames').touched ||
        dataForm.get('usernames').dirty) &&
        dataForm.get('usernames').errors)}">
            <mat-form-field fxFlex>
                <input matInput placeholder=" Username" formControlName="usernames">
                <mat-error *ngIf="((dataForm.get('usernames').touched ||
                    dataForm.get('usernames').dirty) &&
                    dataForm.get('usernames').errors).required">
                    Username empty
                </mat-error>
            </mat-form-field>
        </div>

这个按钮

 <button mat-raised-button class="save-button mat-accent" type="submit" (click)="showToaster()"
                [mat-dialog-close] [disabled]="dataForm.errors.required? true: null">Save</button>&nbsp;

Answer 1

我的老师

ngOnInit() {
this.dataForm= this.formBuilder.group({
  usernames: ['', [Validators.required]],
});}

Answer 2

看起来问题是由您的 dataForm.get('usernames').errors).required 造成的要么在调用它的 required 属性之前检查 dataForm.get('usernames').errors 不为空，要么尝试只使用 dataForm.get('usernames').errors 而不调用 required 属性给定你只有一个规则对于那个字段

用代码编辑

<mat-error *ngIf="((dataForm.get('usernames').touched ||
                dataForm.get('usernames').dirty) &&
                dataForm.get('usernames').errors)">
                Username empty
            </mat-error>

删除了 .required 对于按钮部分，要么使用 [disabled]="dataForm.errors&&dataForm.errors.required? true: null" 或 [disabled]="dataForm.errors? true: null"

Answer 3

你可以简单地做 [disabled]="!dataForm.valid".

使用 ngIf 错误时如何禁用 angular 6 中的按钮保存

How to disable Button save in angular 6 when use ngIf errors

javascript

typescript

angular6