Javascript “提交”按钮在角度表单无效时启用

我有一个默认情况下无效的搜索表单，因为它需要一些数据。由于表单无效，我还禁用了提交按钮：

<form [formGroup]="searchForm" (ngSubmit)="search()">
     <input
        formControlName="number"
        type="search"
        required>
    <button type="submit" [disabled]="searchForm.invalid">Search</button>
</form>

这些

console.log

s给了我：

LOG: false
LOG: true

这是我的测试用例：

describe('SearchComponent', () => {
  let component: SearchFormComponent;
  let fixture: ComponentFixture<SearchFormComponent>;

  const searchParams = Object.freeze({});

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [ReactiveFormsModule],
      declarations: [ SearchFormComponent ],
      providers: [
        FormBuilder,
        { provide: ActivatedRoute, useValue: { 'queryParams': Observable.of(searchParams) } },
        { provide: Router, useValue: jasmine.createSpy('navigate') }
      ],
    })
    .compileComponents();
  }));

  const updateForm = (control, value) => component.searchForm.controls[control].setValue(value);

  beforeEach(() => {
    fixture = TestBed.createComponent(SearchFormComponent);
    component = fixture.componentInstance;
    component.ngOnInit();
  });

  fit(`should disable a search button`, () => {
    const submitButton = fixture.debugElement.query(By.css('button[type="submit"]'));
    console.log(submitButton.nativeElement.disabled);
    console.log(component.searchForm.invalid);
  });

});

description（'SearchComponent'，（）=>{
let组件：SearchFormComponent；
let夹具：组件夹具；
const searchParams=Object.freeze（{}）；
beforeach（异步（（）=>{
TestBed.configureTestingModule({
导入：[ReactiveFormsModule]，
声明：[SearchFormComponent]，
供应商：[
造模工，
{provide:ActivatedRoute，useValue:{'queryParams'：Observable.of（searchParams）}，
{提供：路由器，使用值：jasmine.createSpy（'navigate'）}
],
})
.compileComponents（）；
}));
const updateForm=（控件，值）=>component.searchForm.controls[control].setValue（值）；
在每个之前（（）=>{
fixture=TestBed.createComponent（SearchFormComponent）；
组件=fixture.componentInstance；
组件。ngOnInit（）；
});
fit（`应禁用搜索按钮'，（）=>{
const submitButton=fixture.debugElement.query（By.css（'button[type=“submit”]）；
log（submitButton.nativeElement.disabled）；
console.log（component.searchForm.invalid）；
});
});

为什么会发生这种情况以及如何解决

describe('SearchComponent', () => {
  let component: SearchFormComponent;
  let fixture: ComponentFixture<SearchFormComponent>;

  const searchParams = Object.freeze({});

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [ReactiveFormsModule],
      declarations: [ SearchFormComponent ],
      providers: [
        FormBuilder,
        { provide: ActivatedRoute, useValue: { 'queryParams': Observable.of(searchParams) } },
        { provide: Router, useValue: jasmine.createSpy('navigate') }
      ],
    })
    .compileComponents();
  }));

  const updateForm = (control, value) => component.searchForm.controls[control].setValue(value);

  beforeEach(() => {
    fixture = TestBed.createComponent(SearchFormComponent);
    component = fixture.componentInstance;
    component.ngOnInit();
  });

  fit(`should disable a search button`, () => {
    const submitButton = fixture.debugElement.query(By.css('button[type="submit"]'));
    console.log(submitButton.nativeElement.disabled);
    console.log(component.searchForm.invalid);
  });

});