Как отключить сохранение кнопки в angular 6 при использовании ошибок ngIf

Question

У меня возникает проблема, когда я нажимаю кнопку Сохранить, появляется сообщение об ошибке «Не удается прочитать свойство« required »из 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

выглядит как ваш dataForm.get('usernames').errors).required, вызывающий проблему, либо проверьте, dataForm.get('usernames').errors не является ли оно нулевым, перед вызовом его свойства required, либо попробуйте просто использовать 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 2

Вы можете просто сделать [disabled]="!dataForm.valid".

Answer 3

Мой тс

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