未在文本框中显示角度json值

问题描述

我是Angular的新手，我不知道这里发生了什么。 我有一个MVC控制器，可以为我提供正确的值，例如{PostalContactPerson：jeff} 但是我的Angualar视图无法识别输入框中页面加载的值。

请问如何将值输入文本框？令我困惑的是，当从同一表单组中显示其他值时，为什么它是“空白”。

Form.component.ts

export class FormComponent implements OnInit {
  data: any = null;



 this.arService.get(id,true)
                .subscribe(data => {
                    this.loading = false;
                    this.ar = data;
                    this.attachments = this.ar.attachments.filter(e => e.type == Enums.AttachmentType.normal);
                    **this.data = this.ensureData(data.formData);
                    this.ar.formData = this.data;**

  this.station@R_1_4045@ionForm = formBuilder.group({
    "businessNumbersGroup": formBuilder.group({
      "acn": [this.data.acn],"icn": [this.data.icn],"postalcontactperson": [this.data.postaladdress],},),});
}

ensureData(data: any): any {
        if (data == null) {
            data = {};
        }

 if (!data["postalcontactperson"]) {
        data["postalcontactperson"] = { state: "" };
    }

form.component.html

<div [formGroup]="station@R_1_404[email protected]['businessNumbersGroup']">
  <div class="row">
    <div class="col-sm-6">
      <div class="form-group">
        <label>ACN</label>
        <div class="form-description">Specify if applicable</div>
        <input type="text" [ngClass]="{'has-error': !station@R_1_404[email protected]['businessNumbersGroup'].valid && (station@R_1_404[email protected]['businessNumbersGroup'].controls['acn'].touched || workflowSections[0].submitted)}" formControlName="acn" [(ngModel)]="data.acn"
          class="form-control" />
        <hr/>
      </div>

      <div class="form-group">
        <label>postalcontactperson</label>
        <div class="form-description">Specify if applicable</div>
        <input type="text" [ngClass]="{'has-error': !station@R_1_404[email protected]['businessNumbersGroup'].valid && (station@R_1_404[email protected]['businessNumbersGroup'].controls['PostalContactPerson'].touched || workflowSections[0].submitted)}" formControlName="PostalContactPerson"
          [(ngModel)]="data.postalcontactperson" class="form-control" />
      </div>
      <hr/>
    </div>
  </div>
</div>

MVC模型

      public static AnnualReturnModel Create(AnnualReturn annualReturn)
            {
               return new AnnualReturnModel
                {
                    Id = annualReturn.Id,FormData = annualReturn.FormData,PostalContactPerson = annualReturn.FormData.PostalContactPerson,}
}

MVC表单数据

 public class AnnualReturnFormData
    {
        public int? ActiveSectionIndex { get; set; }

        #region Station @R_1_4045@ion
        public string LesseeNames { get; set; }

        //Postal Address
        public string PostalContactPerson { get; set; }
}

上面的

json结果：

{"ActiveSectionIndex":0,"LesseeNames":"aaa","PostalContactPerson":"aa","PostalPosition":"aa","PostalEmail":"aa","PostalPhone":"aa","StationContactPerson":"aaa"}

debugging description here

在页面加载时，我的ACN显示在文本框中，而PostalContactPerson未显示。为什么？

当我在网站上发出警报时，联系人没有显示我的价值。 警报（this.data.acn）; //显示值为22222 alert（“ contact person =” + this.data.postalcontactperson）; //显示未定义

有什么建议吗？我缺少什么，当我检查数据库时，JSON值正确显示。 任何建议，不胜感激。 ngModel我缺少什么？

我已将代码更新为以下代码： form.component.html

 <div [formGroup]="station@R_1_404[email protected]['postalAddressGroup']">
            <div class="row">
             <div class="col-sm-6">
                <div class="form-group">
                  <label>Contact Person</label>
                  <input type="text" formControlName="postalcontactperson"class="form-control" value={{annualReturn.postalcontactperson}} /> <!--value={{annualReturn.postalcontactperson}}-->

               </div>
               <div class="form-group">
                <label>Position</label>
                <input type="text" formControlName="postalposition" class="form-control" />
                <div class="validation-error" *ngIf="!station@R_1_404[email protected]['postalAddressGroup'].valid && (station@R_1_404[email protected]['postalAddressGroup'].get('postalposition').touched || workflowSections[0].submitted)">You must specify Position</div>
              </div>
            </div>

            <div class="row">
            <div class="col-sm-6">
              <div class="form-group">
               <label>Email</label>
               <input type="text" formControlName="postalemail" class="form-control" />
               <div class="validation-error" *ngIf="!station@R_1_404[email protected]['postalAddressGroup'].valid && (station@R_1_404[email protected]['postalAddressGroup'].get('postalemail').touched || workflowSections[0].submitted)">You must specify email</div>
             </div>
             <div class="form-group">
              <label>Phone</label>
              <input type="text" formControlName="postalphone" class="form-control" />
              <div class="validation-error" *ngIf="!station@R_1_404[email protected]['postalAddressGroup'].valid && (station@R_1_404[email protected]['postalAddressGroup'].get('postalphone').touched || workflowSections[0].submitted)">You must specify phone</div>
            </div>
          </div>
        </div>
          </div>
        </div> 

form.component.ts

 var id = this.route.snapshot.params['param'];
        if (id != null) {
            this.arService.get(param,true)
                .subscribe(data => {
                    this.loading = false;
                    this.annualReturn = data;
                    this.attachments = this.annualReturn.attachments.filter(e => e.type == Enums.AttachmentType.normal);
                    this.data = this.ensureData(data.formData);
                    this.annualReturn.formData = this.data;

                    this.dateConfig.disableuntil = { year: this.annualReturn.year - 1,month: 6,day: 30 };
                    this.dateConfig.disableSince = { year: this.annualReturn.year,month: 7,day: 1 };
                    
                  //  this.testprop = this.data.postalcontactperson;
    
                    this.station@R_1_4045@ionForm = formBuilder.group({
                        "survey.region": [this.data.survey.region],"lesseeNames": [this.data.stationName,Validators.required],// "somethingfancy": [this.data.postalcontactperson],"postalcontactperson": [this.data.postalcontactperson],"postalAddressGroup": formBuilder.group({
                             "postalcontactperson": [this.data.postalcontactperson,"postalposition": [this.data.postalposition,"postalemail": [this.data.postalemail,"postalphone": [this.data.postalphone,

解决方法

您指的是模板文件中不正确的formControlName。是postalcontactperson而不是PostalContactPerson 。观察大写字母P...C...P...。最好不要像使用[(ngModel)]那样使用Reactive Forms。仅供参考，请参阅以下更改

工作stackblitz

打字稿文件

export class AppComponent implements OnInit {
  addressForm: FormGroup;
  stationInformationForm: FormGroup;
  data: any = {
    acn: 1,icn: 2,postaladdress: {
      contactperson: "Michael",address: "Some Address"
    }
  };

  constructor(private formBuilder: FormBuilder) {}

  public ngOnInit() {
    this.stationInformationForm = this.formBuilder.group({
      businessNumbersGroup: this.formBuilder.group({
        acn: [this.data.acn,Validators.required],icn: [this.data.icn,postalcontactperson: [this.data.postaladdress.contactperson,Validators.required]
      })
    });

    // Getting inner form group
    this.addressForm = this.stationInformationForm.get(
      "businessNumbersGroup"
    ) as FormGroup;

    // Getting Form Changes instead of using `[(ngModel)]`
    this.addressForm.valueChanges.subscribe(data => console.log(data));
  }
}

模板文件

<div [formGroup]="addressForm">
    <label>ACN</label>
    <div class="form-description">Specify if applicable</div>
    <input type="text" [ngClass]="{'has-error': !addressForm.valid && addressForm.get('acn').touched }" formControlName="acn" class="form-control" />
    <hr />
    <label>postalcontactperson</label>
    <div class="form-description">Specify if applicable</div>
    <input type="text" [ngClass]="{'has-error': !addressForm.valid && addressForm.get('postalcontactperson').touched }" formControlName="postalcontactperson" class="form-control" />
</div>