Angular 在子组件中传递ngModel以进行常见错误处理

我试图将子组件中的ngModel传递到公共组件中的显示错误

这是一个错误。 模板分析错误：没有NgControl的提供程序

请任何人检查一下代码，让我知道我遗漏了什么

父组件

      <div>
  <h2>Hello {{name}}</h2>
  <form #countryForm="ngForm">
    <div class="form-group row">
      <label for="txtCountryName" class="col-sm-3 col-form-label">Country Name</label>
      <div class="col-sm-9">
        <input type="text" [(ngModel)]="name" ngModel #countryName="ngModel" name="name" class="form-control" id="txtCountryName" placeholder="Country Name"              required minlength="5" maxlength="15">
        <app-error-message [formControl]="countryName"></app-error-message>
      </div>
    </div>
  </form>
</div>

@Component({
selector: 'app-error-message',
template: `<ng-container *ngIf="formControl">
            <div [hidden]="(formControl.valid || formControl.pristine) && (formControl.errors == null || formControl.errors.invalid == null)" class="alert alert-danger">  
              {{GetValidationMessage()}} 
            </div> 
          </ng-container>`

  })

export class ErrorMessageComponent  {
@Input() public formControl: any = null;

public GetValidationMessage() {
    let errorMessage: string = "";
    if (this.formControl.errors) {
        if (this.formControl.dirty || this.formControl.touched) {
            if (this.formControl.errors.required != null) {
                errorMessage = "This field is required.";
            }
            if (this.formControl.errors.minlength != null) {
                errorMessage += "This field must be 8 characters long, we need another " + (this.formControl.errors.minlength.requiredLength - this.formControl.errors.minlength.actualLength) + " characters";
            }
        }
        if (this.formControl.errors.invalid != null) {
            errorMessage += this.formControl.errors.errorMessage;
        }
    }
    return errorMessage;
}

你好{{name}
国名

子组件

      <div>
  <h2>Hello {{name}}</h2>
  <form #countryForm="ngForm">
    <div class="form-group row">
      <label for="txtCountryName" class="col-sm-3 col-form-label">Country Name</label>
      <div class="col-sm-9">
        <input type="text" [(ngModel)]="name" ngModel #countryName="ngModel" name="name" class="form-control" id="txtCountryName" placeholder="Country Name"              required minlength="5" maxlength="15">
        <app-error-message [formControl]="countryName"></app-error-message>
      </div>
    </div>
  </form>
</div>

@Component({
selector: 'app-error-message',
template: `<ng-container *ngIf="formControl">
            <div [hidden]="(formControl.valid || formControl.pristine) && (formControl.errors == null || formControl.errors.invalid == null)" class="alert alert-danger">  
              {{GetValidationMessage()}} 
            </div> 
          </ng-container>`

  })

export class ErrorMessageComponent  {
@Input() public formControl: any = null;

public GetValidationMessage() {
    let errorMessage: string = "";
    if (this.formControl.errors) {
        if (this.formControl.dirty || this.formControl.touched) {
            if (this.formControl.errors.required != null) {
                errorMessage = "This field is required.";
            }
            if (this.formControl.errors.minlength != null) {
                errorMessage += "This field must be 8 characters long, we need another " + (this.formControl.errors.minlength.requiredLength - this.formControl.errors.minlength.actualLength) + " characters";
            }
        }
        if (this.formControl.errors.invalid != null) {
            errorMessage += this.formControl.errors.errorMessage;
        }
    }
    return errorMessage;
}

@组件({
选择器：“应用程序错误消息”，
模板：`
{{GetValidationMessage（）}}
`
})
导出类ErrorMessageComponent{
@Input（）公共表单控件：any=null；
公共GetValidationMessage（）{
let errorMessage:string=“”；
if（this.formControl.errors）{
if（this.formControl.dirty | | this.formControl.toucted）{
if（this.formControl.errors.required！=null）{
errorMessage=“此字段是必需的。”；
}
if（this.formControl.errors.minlength！=null）{
errorMessage+=“此字段的长度必须为8个字符，我们需要另一个“+（This.formControl.errors.minlength.requiredLength-This.formControl.errors.minlength.actualLength）+”字符；
}
}
if（this.formControl.errors.invalid！=null）{
errorMessage+=this.formControl.errors.errorMessage；
}
}
返回错误消息；
}

---

}

尝试访问父组件中的本地模板引用变量

#countryName

。通过

@ViewChild

然后将属性

public countryName:any

设置为等于本地模板变量

//父组件

export class ParentComp implements AfterViewInIt{
      @ViewChild('add_template_reference_variable_here') countryNameRef;
      public countryName: any;

      ngAfterViewInit(): void {
       this.countryName = this.countryNameRef;
      }
}

然后将新变量绑定到

[formControl]=“countryName”

//父Html模板

<app-error-message [formControl]="countryName"></app-error-message>

---

尝试访问父组件中的本地模板引用变量

#countryName

。通过

@ViewChild

然后将属性

public countryName:any

设置为等于本地模板变量

//父组件

export class ParentComp implements AfterViewInIt{
      @ViewChild('add_template_reference_variable_here') countryNameRef;
      public countryName: any;

      ngAfterViewInit(): void {
       this.countryName = this.countryNameRef;
      }
}

然后将新变量绑定到

[formControl]=“countryName”

//父Html模板

<app-error-message [formControl]="countryName"></app-error-message>

---

您应该为

@Input

使用另一个名称，以避免与需要

NgControl

提供程序的内置指令

NgControlStatus

相交

为此，您可以完全替换属性名

错误消息.component.ts

@Input() public control: any = null;

@Input('control') public formControl: any = null;

parent.html

<app-error-message [control]="countryName"></app-error-message>

<app-error-message [control]="countryName"></app-error-message>

parent.html

<app-error-message [control]="countryName"></app-error-message>

<app-error-message [control]="countryName"></app-error-message>

---

您应该为
@Input
使用另一个名称，以避免与需要
NgControl
提供程序的内置指令
NgControlStatus
相交

为此，您可以完全替换属性名

错误消息.component.ts

@Input() public control: any = null;

@Input('control') public formControl: any = null;

parent.html

<app-error-message [control]="countryName"></app-error-message>

<app-error-message [control]="countryName"></app-error-message>

parent.html

<app-error-message [control]="countryName"></app-error-message>

<app-error-message [control]="countryName"></app-error-message>

是否将数据传递到子组件中的
formControl
中？是否将数据复制到子组件中的
formControl
中？此数据的可能复制解决了我的错误，决不认为这是一个实际问题。谢谢@yurzuiThis解决了我的错误，从来没有想过这是一个实际问题。谢谢@yurzui