Angular 当表单无效时禁用提交表单+；材料

我正在使用Angular 5.1.1/Typescript 2.4.2+材质5和库构建表单

在输入无效时尝试禁用“提交”按钮，但未成功。 我正在使用这种材料

验证工作正常，我收到一条错误消息，但按钮并没有被禁用，表单提交时带有一个空值。当输入无效时，我不知道如何使用正确的条件禁用按钮。 试过

ng-disabled="!flagForm.valid"

及

使用时

[disabled]="!flagForm.valid"

我得到'TypeError:无法读取未定义的'valid'属性

它们似乎都不起作用。我错过了什么？这是完整的代码

   import { Component, Input, Optional, Host } from '@angular/core';
    import { FormControl, FormGroupDirective, NgForm, Validators} from '@angular/forms';
    import { SatPopover } from '@ncstate/sat-popover';
    import { filter } from 'rxjs/operators/filter';
    import { ErrorStateMatcher} from '@angular/material/core';

    /** Error when invalid control is dirty, touched, or submitted. */
    export class MyErrorStateMatcher implements ErrorStateMatcher {
      isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
        const isSubmitted = form && form.submitted;
        return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
      }
    } 

    @Component({
      selector: 'inline-edit',
      styleUrls: ['inline-edit.component.scss'], 
      template: `
        <form (ngSubmit)="onSubmit()" name="flagForm" novalidate>
          <div class="mat-subheading-2">Submit Your flag</div>

          <mat-form-field>
            <input matInput maxLength="140" name="flag" [(ngModel)]="flag" [formControl]="flagFormControl"
               [errorStateMatcher]="matcher">
            <mat-hint align="end">{{flag?.length || 0}}/140</mat-hint>
            <mat-error *ngIf="flagFormControl.hasError('required')">
              Flag is <strong>required</strong>
            </mat-error>        
          </mat-form-field>

          <div class="actions">
            <button mat-button type="button" color="primary" (click)="onCancel()" class="btn btn-secondary m-btn m-btn--air m-btn--custom">CANCEL</button>
            <button mat-button type="submit" ng-disabled="!flagForm.valid" color="primary" class="btn btn-accent m-btn m-btn--air m-btn--custom">Submit</button>
          </div>
        </form>
      `
    })
    export class InlineEditComponent {

      flagFormControl = new FormControl('', [
        Validators.required
      ]);

      matcher = new MyErrorStateMatcher();

      /** Overrides the flag and provides a reset value when changes are cancelled. */
      @Input()
      get value(): string { return this._value; }
      set value(x: string) {
        this.flag = this._value = x;
      }
      private _value = '';

      /** Form model for the input. */
      flag = '';

      constructor(@Optional() @Host() public popover: SatPopover) { }

      ngOnInit() {
        // subscribe to cancellations and reset form value
        if (this.popover) {
          this.popover.closed.pipe(filter(val => val == null))
            .subscribe(() => this.flag = this.value || '');
        }
      }

      onSubmit() {
        if (this.popover) {
          this.popover.close(this.flag);
        }
      }

      onCancel() {
        if (this.popover) {
          this.popover.close();
        }
      }
    }

从'@angular/core'导入{组件，输入，可选，主机}；
从'@angular/forms'导入{FormControl，FormGroupDirective，NgForm，Validators}；
从'@ncstate/sat-popover'导入{SatPopover}；
从'rxjs/operators/filter'导入{filter}；
从“@angular/material/core”导入{ErrorStateMatcher}；
/**无效控件变脏、触碰或提交时出错*/
导出类MyErrorStateMatcher实现ErrorStateMatcher{
isErrorState（控件：FormControl | null，形式：FormGroupDirective | NgForm | null）：布尔值{
const issubmitt=form&&form.submitted；
return！！（control&&control.invalid&&control.dirty | | | control.touch | | isSubmitted））；
}
} 
@组成部分({
选择器：“内联编辑”，
样式URL:['inline-edit.component.scss']，
模板：`
提交你的旗帜
{{flag？.length | | 0}}/140
标志是必需的
取消
提交
`
})
导出类InlineEditComponent{
flagFormControl=新的FormControl（“”[
需要验证器
]);
matcher=新的MyErrorStateMatcher（）；
/**覆盖该标志，并在取消更改时提供重置值*/
@输入（）
get value（）：字符串{返回此值。_value；}
设置值（x:字符串）{
this.flag=this.\u值=x；
}
私有_值=“”；
/**输入的表单模型*/
旗帜=''；
构造函数（@Optional（）@Host（）public-popover:SatPopover）{}
恩戈尼尼特（）{
//订阅取消和重置表单值
if（this.popover）{
this.popover.closed.pipe（过滤器（val=>val==null））
.subscribe（（）=>this.flag=this.value | |“”）；
}
}
onSubmit（）{
if（this.popover）{
this.popover.close（this.flag）；
}
}
onCancel（）{
if（this.popover）{
this.popover.close（）；
}
}
}

请更正“角度禁用”的语法

 <button mat-button type="submit" [disabled]="!flagForm.valid" color="primary" class="btn btn-accent m-btn m-btn--air m-btn--custom">Submit</button>

提交

有必要在类中实例化一个表单，如下所示

flagForm: FormGroup;

<form [formGroup]="userForm" novalidate (ngSubmit)="onSubmit()">

---

除了将类中的FormGroup声明为@tihoroot之外，您可能还希望在类定义中获得formControl的实例，如下所示：

get flagFormControl（）{
返回此.flagForm.get（'flagFormControl'）；
}

---

否则Angular找不到所需字段的实例。

对于Angular latest，您可以使用下面的简单代码在类型脚本中验证表单

假设您的表单如下所示

flagForm: FormGroup;

<form [formGroup]="userForm" novalidate (ngSubmit)="onSubmit()">

---

它是

[禁用]

我也试过了。。我得到'TypeError:无法读取未定义'oh yes'的属性'valid'，我也尝试了。。我得到'TypeError:无法读取未定义的'valid'属性