Angular json 值未显示在文本框中

Question

我是 Angular 的新手，我不知道这里发生了什么。我有一个 MVC 控制器，它给我正确的值，例如 {PostalContactPerson : jeff} 但是我的 Angualar 视图无法识别输入框中页面加载的值。请问我怎样才能将值输入文本框？我很困惑为什么当从同一个表单组显示其他值时它是“空白的”。表单.component.tsexport 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. 仅供参考，请参考以下更改

工作堆栈闪电战

打字稿文件

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>