小编Jul*_*lia的帖子

我目前正在尝试编写一个全局日期选择器。为此，我创建了一个从角度观察给定示例的组件（https://material.angular.io/guide/creating-a-custom-form-field-control）。我只想外包整个 mat-form-field 的一部分，所以这就是我正在做的事情：

应用程序组件.html：

  <mat-form-field color="accent" floatLabel="always">
    <mat-label>Date of Birth</mat-label>
    <my-date-picker formControlName="birthday"></my-date-picker>
  </mat-form-field>

我的日期选择器.component.html：

<input matInput [matDatepicker]="picker" placeholder="TT.MM.JJJJ" [ngModel]="value"
  (ngModelChange)="modelChanged($event)">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>

（我认为 .ts 对我的问题不重要）

但现在看起来像这样：

如果我将其像这样包装在 app.component.html 中，也会发生这种情况：

  <mat-form-field color="accent" floatLabel="always">
    <mat-label>Date of Birth</mat-label>
    <div>
      <input matInput [matDatepicker]="picker" placeholder="TT.MM.JJJJ" [ngModel]="value"
      (ngModelChange)="modelChanged($event)">
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>
    </div>
  </mat-form-field>

因为这样它将 matSuffix 呈现为 mat-infix 的一部分。所以看来 matSuffix 没有被正确识别。

虽然它会像这样渲染而不需要额外的包装器（div）：

推杆：

<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>

在 app.component.html 中不是一个选项。我尝试了这个，但这只会导致其他错误，这些错误比 css 错误更糟糕。

我想知道以下情况会发生什么：

我有一个带有这些控件的 formGroup：

{
  forename: new FormControl()
  surname: new FormControl()
}

现在我像这样跟踪控件“姓氏”的变化（只是一个例子）：

this.formGroup.get('surname').valueChanges.subscribe(changes => {
   if(this.formGroup.get('forename') == 'Max'){
      this.formGroup.get('forename').disable();
   }
})

最后我像这样修补我的表单：

this.formGroup.patchForm({surname: 'Muster', forename: 'Max'});

控件“名字”会被禁用吗？因为我不确定它是否会在设置控件“名字”的值之前触发控件“姓氏”的更改。因此，“名字”可能还没有“正确”值。

我试图更好地理解，当触发确切的 valueChanges 事件时，因为我有时会遇到问题，但值没有设置，尽管它们应该设置。

我还想知道是否可以等到每个控件都修补完毕然后发出更改。