Angular 角度窗体控件在窗体中有多个控件时始终有效

我有两个使用FormControl的输入，它们始终显示为有效，但如果我取出一个，则剩余的将如预期的那样有效/无效。我会将两个formcontrols更改为一个ControlGroup，而不是1。我想知道我做错了什么，2。我需要访问一个formcontrol，以便在组件中自动完成

任何我出错的地方都将受到感谢，提前谢谢

相关HTML：

<form 
    fxLayout="column" 
    fxLayoutAlign="center center" 
    (ngSubmit)="onSubmit(status, count)" 
    #statusForm="ngForm"
>

    <!-- Status Input -->
    <div>
        <mat-form-field>
        <input 
            matInput placeholder="Status" 
            [formControl]="statusFormControl"
            [errorStateMatcher]="matcher"
            [matAutocomplete]="auto"
            [(ngModel)]="status"
            name="status"
            required
        >
        <mat-error *ngIf="statusFormControl.hasError('required')">
            Status is <strong>required</strong>
        </mat-error>
    </mat-form-field>

    <mat-autocomplete #auto="matAutocomplete">
        <mat-option *ngFor="let status of filteredStatusList | async" [value]="status.name">
        {{ status.name }}
        </mat-option>
    </mat-autocomplete>
    </div>


    <!-- Count Input -->
    <mat-form-field>
        <input 
            matInput placeholder="Count" 
            [formControl]="countFormControl"
            type="number"
            min="1"
            [(ngModel)]="count"
            name="count"
            required
        >
        <mat-error *ngIf="countFormControl.hasError('required')">
            Count must be a <strong>number</strong>
        </mat-error>
    </mat-form-field>

    {{statusForm.valid}}
    {{statusForm.invalid}}

    <button 
        mat-raised-button color="primary" 
        *ngIf="statusForm.valid" 
        type="submit" 
        [disabled]="statusForm.invalid"
    >
        Add
    </button>

---

下面是我的一个人使用反应式表单的样子，见下文。请注意表单的formGroup指令。我使用了formControlName指令而不是formControl指令。。。但这两种方法都可行

HTML

此外，如果需要使用上述语法引用其中一个FormControls，可以这样做：

this.customerForm.get('lastName')

this.filteredStatusList = this.myForm.get('status').valueChanges
  .pipe(
    startWith(''),
    map(status => status ? this.filterStatusList(status) : this.allStatuses.slice())
  );

然后，您的方法将如下所示：

this.customerForm.get('lastName')

this.filteredStatusList = this.myForm.get('status').valueChanges
  .pipe(
    startWith(''),
    map(status => status ? this.filterStatusList(status) : this.allStatuses.slice())
  );

---

我不知道这是否造成了你的问题。。。但强烈建议我们使用模板驱动的表单或反应式表单。。。不是两者都有。目前，您正在使用这两种方法。除了模板中的ngModel之外，代码中还有新的FormControl。考虑删除NGMAMP，只使用反应式。

this.filteredStatusList = this.myForm.get('status').valueChanges
  .pipe(
    startWith(''),
    map(status => status ? this.filterStatusList(status) : this.allStatuses.slice())
  );