Angular json 值未显示在文本框中

Question

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

请问我怎样才能将值输入文本框？我很困惑为什么当从同一个表单组显示其他值时它是“空白的”。

表单.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: "" };

    }

表单.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>

          [(ngModel)]="data.postalcontactperson" class="form-control" />

      </div>

      <hr/>

    </div>

  </div>

</div>

Answer 1

formControlName您指的是模板文件中的错误。它postalcontactperson不是PostalContactPerson 。观察首都P...C...P...。最好不要使用，[(ngModel)]因为您已经在使用Reactive Forms.&nbsp;仅供参考，请参考以下更改工作堆栈闪电战打字稿文件export class AppComponent implements OnInit {&nbsp; addressForm: FormGroup;&nbsp; stationInformationForm: FormGroup;&nbsp; data: any = {&nbsp; &nbsp; acn: 1,&nbsp; &nbsp; icn: 2,&nbsp; &nbsp; postaladdress: {&nbsp; &nbsp; &nbsp; contactperson: "Michael",&nbsp; &nbsp; &nbsp; address: "Some Address"&nbsp; &nbsp; }&nbsp; };&nbsp; constructor(private formBuilder: FormBuilder) {}&nbsp; public ngOnInit() {&nbsp; &nbsp; this.stationInformationForm = this.formBuilder.group({&nbsp; &nbsp; &nbsp; businessNumbersGroup: this.formBuilder.group({&nbsp; &nbsp; &nbsp; &nbsp; acn: [this.data.acn, Validators.required],&nbsp; &nbsp; &nbsp; &nbsp; icn: [this.data.icn, Validators.required],&nbsp; &nbsp; &nbsp; &nbsp; postalcontactperson: [this.data.postaladdress.contactperson, Validators.required]&nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; });&nbsp; &nbsp; // Getting inner form group&nbsp; &nbsp; this.addressForm = this.stationInformationForm.get(&nbsp; &nbsp; &nbsp; "businessNumbersGroup"&nbsp; &nbsp; ) as FormGroup;&nbsp; &nbsp; // Getting Form Changes instead of using `[(ngModel)]`&nbsp; &nbsp; this.addressForm.valueChanges.subscribe(data => console.log(data));&nbsp; }}模板文件<div [formGroup]="addressForm">&nbsp; &nbsp; <label>ACN</label>&nbsp; &nbsp; <div class="form-description">Specify if applicable</div>&nbsp; &nbsp; <input type="text" [ngClass]="{'has-error': !addressForm.valid && addressForm.get('acn').touched }" formControlName="acn" class="form-control" />&nbsp; &nbsp; <hr />&nbsp; &nbsp; <label>postalcontactperson</label>&nbsp; &nbsp; <div class="form-description">Specify if applicable</div>&nbsp; &nbsp; <input type="text" [ngClass]="{'has-error': !addressForm.valid && addressForm.get('postalcontactperson').touched }" formControlName="postalcontactperson" class="form-control" /></div>