1

运行 nativescript 应用程序时出现此错误。

在嵌套表单组中出现问题。问题背后的原因是什么。我在下面附上了我的错误图片，

单击此处查看错误图像

请为此问题提供解决方案。

ts代码：

import { FormGroup, FormBuilder, AbstractControl, Validators } from "@angular/forms";

@Component({
    selector:"login",
    moduleId:module.id,
    templateUrl:"./login.component.html",
    styleUrls:["./login.component.css"],
})


export class LoginComponent implements OnInit
{
loginFormGroupNew:FormGroup;
    mobileNumber:AbstractControl;
    mobileOTP:AbstractControl;
    email:AbstractControl;
    name:AbstractControl;
    .
    .
    .
    constructor(private authService:AuthenticationService, private routerExtensions:RouterExtensions,private page:Page,private formbuilder: FormBuilder){
        this.conn = new Connections();
        this.feedmodel = new FeedbackModel();
        this.loginFormGroupNew = this.formbuilder.group({
            loginFormGroup:this.formbuilder.group({
                mobileGroup:this.formbuilder.group({
                    // mobileNumber: ["",[Validators.required]]
                    mobileNumber: ["",[Validators.required],[Validation.validateMobile]]
                }),
                mobileOTP:["",[Validators.required],[Validation.validateotp]]
            }),
            email:["",[Validators.required],[Validation.validateEmail]],
            name:["",[Validators.required]]
        });
        
    }

 ngOnInit(){   
        if(isAndroid){
            this.platform=true;
        }else{
            this.platform=false;
        }
        this.page.actionBarHidden = true;
        this.login = this.page.getViewById("login");     
    }
    .
    .
    .
    .

  ResendOTP(){
    this.loginFormGroupNew.controls.loginFormGroup['controls'].mobileGroup.get('mobileNumber').enable();
    this.loginFormGroupNew.controls.loginFormGroup.get('mobileOTP').reset();
    if (!this.conn.getConnectionStatus()){
        // Toast.makeText("Please check your internet connection").show();
        this.feedmodel.showError("Info","Please check your internet connection");
        return;
    }
    this.SendOTP(true);
}

 }

4

1 回答 1

0

loginFormGroupNew.controls返回一个AbstractControl[].

因此，即使loginFormGroup您获得的控制控件是FormGroup，Typescript 也无法推断它。

从 a 获取控件的更简单方法FormGroup是使用该方法get()，因为它甚至允许您获取对嵌套控件的引用。在您的情况下，您可以使用：

loginFormGroupNew.get('loginFormGroup.mobileOTP')

直接获取 mobileOTP 控件参考。

为避免在模板中多次重复这段代码以获取对同一控件的引用，您可以在类中创建一个 getter 并在模板中使用它。

get mobileOTPControl(): FormControl {
  return this.loginFormGroupNew.get('loginFormGroup.mobileOTP') as FormControl;
}

...

<Image ... *ngIf="mobileOTPControl.errors" ...>

这样，您可以将控件转换为正确的类型，如果将来您的表单模型发生更改，您只需在一个地方调整对该控件的访问。

干杯

于 2022-02-03T11:14:11.237 回答