Angular 为什么这个有角的表格在我填写完之后仍然处于无效状态？

我正在使用素数处理一个角度应用程序，我对表单有以下问题

当我填写表单时，如果所有验证器规则都得到满足，它也会保持在无效状态

这是我的组件HTML视图：

<p-dialog header="Inserire un nuovo asset"
          maximizable="true"
          [(visible)]="displayNewAssetDialog"
          (onHide)="closeDialog()"
          position="top"
          [style]="{width: '50vw'}">

        <form [formGroup]="newAssetForm" id="addAssetForm" (ngSubmit)=saveNewAsset()>

            <div class="row">
                <div class="col-2">
                  <p>Tipo asset</p>
                </div>
                <div class="col-10">
                  <p-dropdown id="assetType"
                              [options]="assetTypeList" 
                              [(ngModel)]="selectedAssetTypeNg" 
                              formControlName="asset_type"
                              placeholder="Tipo asset" 
                              optionLabel="type" 
                              [showClear]="true">
                  </p-dropdown>
                </div>
              </div>

              <div class="row">
                <div class="col-2">
                  <p>Modello</p>
                </div>
                <div class="col-10">
                    <input id="assetModel" formControlName="asset_model" type="text" pInputText />
                </div>
              </div>
              <!--
              <div class="row">
                <div class="col-2">
                  <p>Assegnato a</p>
                </div>
                <div class="col-10">
                  <p-dropdown id="employee_allocation"
                              [options]="employeesList$ | async" 
                              formControlName="employee_allocation"
                              placeholder="Impiegato" 
                              optionLabel="completeName" 
                              [showClear]="true">
                  </p-dropdown>
                </div>
              </div>
            -->
            

              <div class="row">
                <div class="col-2">
                  <p>Caratteristiche</p>
                </div>
                <div class="col-10">
                    <textarea id="assetFeatures" 
                              class="p-inputtextarea"
                              formControlName="asset_features" 
                              [rows]="5" [cols]="30" 
                              pInputTextarea 
                              autoResize="autoResize">
                    </textarea>
                </div>
              </div>

              <div class="row">
                <div class="col-2">
                  <p>Serial Number</p>
                </div>
                <div class="col-10">
                    <input id="serialNumber" formControlName="serial_number" type="text" pInputText />
                </div>
              </div>


              <div class="row">
                <div class="col-2">
                  <p>Data di consegna</p>
                </div>
                <div class="col-10" [ngClass]="{'ng-pristine ng-invalid ng-touched': isEmptyDate}">
                  <p-calendar [ngClass]="{'invalid-date': isValidDate}"
                              id="allocationDate" 
                              inputId="allocationDate"
                              formControlName="allocation_date"
                              >
                  </p-calendar>
                </div>
              </div>

              <div class="row">
                <div class="col-2">
                  <p>company</p>
                </div>
                <div class="col-10">
                    <input id="company" formControlName="company" type="text" pInputText />
                </div>
              </div>

              <div class="row">
                <div class="col-2">
                  <p>Note</p>
                </div>
                <div class="col-10">
                    <textarea id="notes" 
                              class="p-inputtextarea"
                              formControlName="notes" 
                              [rows]="5" [cols]="30" 
                              pInputTextarea 
                              autoResize="autoResize">
                    </textarea>
                </div>
              </div>

              <div class="row">
                <div class="col-2">
                  <p>Fattura/Provenienza</p>
                </div>
                <div class="col-10">
                    <textarea id="invoice" 
                              class="p-inputtextarea"
                              formControlName="invoice" 
                              [rows]="5" [cols]="30" 
                              pInputTextarea 
                              autoResize="autoResize">
                    </textarea>
                </div>
              </div>

              <p-footer>
                <span class="p-buttonset">
                  <button pButton 
                          type="submit"
                          label="Save" 
                          icon="pi pi-check"
                          [disabled]="!newAssetForm.valid">

                  </button>
                  <button pButton type="button" label="Cancel" icon="pi pi-times" (click)="closeDialog()"></button>
              </span>
              </p-footer>

              <p>{{newAssetForm.valid}}</p>
              <p>{{newAssetForm.status | json }}</p>
              <p>{{newAssetForm.value | json }}</p>
        </form>
</p-dialog>

如您所见，表单似乎已完全填写，但仍处于无效状态

这是一个打印屏幕：

---

为什么?？我错过了什么？怎么了？我怎样才能解决这个问题？如何检查表单中的确切错误？（我想也许使用deubugger我可以看到哪些字段出错，或者我可以打印出这些错误）

我可以看到您在表单组中声明了一个名为“附件”的表单控件，例如（附件：[null，[Validators.required]]），它是“必需的”但是，您没有在html中使用它，从而导致一个永久的空值，这是您提供的默认值

您可以在表单上添加另一个条目，如：

<div class="col-10">
   <input id="accessories" formControlName="accessories" type="text" pInputText />
</div>

---

然后试着输入一些随机值来测试这一点。

您能提供一个stackblitz可操作的演示来进行演示吗？：）可能是，好地方：）

false

"INVALID"

{ "asset_type": { "type": "Notebook", "code": "NB" }, "asset_model": "ASUS X509JA-EJ026T ", "asset_features": "test1", "serial_number": "123xxx", "accessories": null, "allocation_date": "2020-12-26T23:00:00.000Z", "company": "Technology", "notes": "test2", "invoice": "test3" }

<div class="col-10">
   <input id="accessories" formControlName="accessories" type="text" pInputText />
</div>