Angular Reactive Forms - 将 ng-invalid 添加到另一个字段（就像使用 [formGroup] 和 [formControl]答案

【问题标题】：Angular Reactive Forms - Add ng-invalid to another field (like it does with [formGroup] and [formControl]Angular Reactive Forms - 将 ng-invalid 添加到另一个字段（就像使用 [formGroup] 和 [formControl]
【发布时间】：2022-01-12 15:45:52
【问题描述】：

我正在使用响应式表单。

我注意到，当标签具有 [formGroup]="mygroup" 时，它会将组验证 .ng-invalid .ng-valid .ng-touched 等添加到该 html 标签。 formControlName="" 和 formGroupName="" 也是如此。

我正在尝试使字段标签在无效时变为红色。有没有办法将这些 CSS 类添加到字段的标签中？

<label form="myfield">This is a label</label>
                          <mat-form-field class="col3 no-bottom dense" id="myfield" appearance="fill">
                            <mat-label>field label</mat-label>
                            <input matInput placeholder="Year" mask="0000" formControlName="myfieldname">
                          </mat-form-field>

谢谢！

【问题讨论】：

标签： angular angular-reactive-forms

【解决方案1】：

如果你触发标签上的 ng-invalid 类怎么办？

<label 
  form="myfield" 
  [class.ng-invalid]="myFormGroup.controls['myfieldname'].invalid">
    This is a label
</label>

【讨论】：

感谢您的回复。我想这可行，但必须以巨大的形式为每个标签写出来。
在这种情况下，使用表单的生成类ng-invalid，对每个label进行cible。
但是表单上生成的 ng-invalid 会给所有标签 ng-invalid，即使一个字段可能无效。我没听错吗？
啊..是的，你是对的！没有考虑到这一点。好吧..我认为我现在没有更好的解决方案：/

【解决方案2】：

我最终做了一个指令，可以这样做：

@Directive({
  selector: '[vControlName].[validate],[vControl].[validate]',
})
export class FieldLabelControl {
  @Input() vControlName?: string
  @Input() validate?:boolean|string = false
  @Input() vControl?: FormControl

  constructor(@Optional() private parent: ControlContainer, @Optional() private parentForm: FormGroupDirective) {}

  @HostBinding('class.invalid')
  get invalid() {
    this.validate = !!this.validate || this.validate === '' || this.validate === 'true'
    if (!this.validate) return false;
    if (this.vControl && this.vControl.invalid) return true
    else if (this.vControlName != null && this.vControlName !== '' && this.parent)
      return !!(this.parent.control?.get(this.vControlName)?.invalid)
    else
      return false
  }

【讨论】：