Angular json 值未显示在文本框中

Question

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

请问如何将值输入文本框？我很困惑为什么它是 'blank' 当其他值从同一个表单组显示时。

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.stationInformationForm = 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]="stationInformationForm.controls['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': !stationInformationForm.controls['businessNumbersGroup'].valid && (stationInformationForm.controls['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': !stationInformationForm.controls['businessNumbersGroup'].valid && (stationInformationForm.controls['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 Information
        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("联系人=" + this.data.postalcontactperson); //显示未定义

有什么建议吗？我错过了什么，JSON 值在我检查数据库时正确显示。非常感谢任何建议。我对 ngModel 缺少什么？

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

 <div [formGroup]="stationInformationForm.controls['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="!stationInformationForm.controls['postalAddressGroup'].valid && (stationInformationForm.controls['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="!stationInformationForm.controls['postalAddressGroup'].valid && (stationInformationForm.controls['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="!stationInformationForm.controls['postalAddressGroup'].valid && (stationInformationForm.controls['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.stationInformationForm = 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, Validators.required],
                             "postalposition": [this.data.postalposition, Validators.required],
                             "postalemail": [this.data.postalemail, Validators.required],
                             "postalphone": [this.data.postalphone, Validators.required],
                         }, ),

Answer 1

您指的是模板文件中不正确的 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, Validators.required],
        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>

Angular json 值未显示在文本框中

Angular json value not displayed in textbox

javascript

angular-ui-router

angular

工作stackblitz