终于解决了！

Finally solved !!!

1. 这里的问题是在子级[SigaAutoCompleteComponent]中创建输入字段时，父级必须了解 值填充在子项[CreateDossierComponent]中， 那部分是 缺少那是它无法变为有效的原因，因为它认为 输入字段未触及[保持无效]-通过发出 给父级赋值，然后根据需要操纵表单控件.
2. 拆分mat-form-field并输入导致了问题-通过将mat-form-field元素移动到child来解决，其他代码保持不变 这样就解决了占位符重叠和单击箭头图标以显示
的问题.

3. 这可以通过将服务注入子组件并执行自动完成功能来完成-[重新设计的一种方法] 在那边[我还没有实现，但这会起作用，因为它只是部门字段的副本]

1. The problem here is when creating the input field in the child[SigaAutoCompleteComponent], the parent has to know about the value filled in the child [CreateDossierComponent], that part is missing that is the reason it cant turn to valid as it thinks that input field is not touched [stays invalid] -- solved by emitting the value to parent then manipulating the form control as needed.
2. Spiltting up the mat-form-field and input caused the issue -- solved by moving mat-form-field element to child , other code stays intact and this solves both the placeholder overlapping and clicking on arrow icon to display

3. This can be done-[one way of doing by redesigning] , by injecting the service into child component and doing the autocomplete feature over there [i haven't implemented this, but this will work as it just copy of department field]

在create-doiser.component.html

in create-doiser.component.html

      <!-- </div> -->
      <mat-autocomplete #thematicAutoComplete="matAutocomplete" [displayWith]="displayThematique">
        <mat-option *ngFor="let thematique of filteredThematiques | async" [value]="thematique">
          <span> {{thematique.code}} </span>
          <span> - </span>
          <span> {{thematique.libelle}} </span>
        </mat-option>
      </mat-autocomplete>

在autocomplete.component.html

in autocomplete.component.html

<mat-form-field style="display:block;transition:none ">
<div fxLayout="row">
  <input  matInput   placeholder="Thématique" [matAutocomplete]="autoCompleteControl" (optionSelected)="test($event)" tabindex="{{tabIndex}}">
  <div class="mat-select-arrow-wrapper" (click)="focus()">
    <div class="mat-select-arrow" [ngClass]="{'mat-select-arrow-down': !autoCompleteControl.isOpen, 'mat-select-arrow-up': autoCompleteControl.isOpen}"></div>
  </div>
</div>

</mat-form-field>

在autocomplete.component.ts

in autocomplete.component.ts

in set value emit the value to parent
this.em.emit(value);

create-dosier.component.ts

create-dosier.component.ts

  this.thematique = new FormControl( ['', [Validators.required, this.thematiqueValidator]]

    ); 

this.formDossier.addControl('thematique',this.thematique);
call(event){

    this.thematique.setValue(event);
    this.thematique.validator=this.thematiqueValidator();
    this.thematique.markAsTouched();
    this.thematique.markAsDirty();

  }
}

这将解决所有问题，如果您要我推送到github，请让我知道. 希望这可以帮助 ！！！！ 谢谢!!

this will resolve all the issues, Please let me know if you want me to push to github .. Hope this helps !!!! Thanks !!

更新: 自动完成，提示现在一切正常.

UPDATE: Auto complete , mat-hint now everything is working..

我了解您不希望输入和mat-form-field在一起

I understand that you don't want input and mat-form-field to be together

但是如果只是让mat-h​​int动态显示[取决于 在 formcontrol values]，我们可以将formcontrol从父级传递到子级 甚至消除了从中发出输入值的必要性 孩子对父母 在父组件中设置值，[mat-h​​int字段保留在父组件本身中]

but if it is just for mat-hint to show dynamically[which is depending on formcontrol values], we can pass the formcontrol from parent to child which even eliminates the necessity of emitting the input value from child to parent setting the value in parent component and [mat-hint field stays in the parent component itself]