文本框中未显示角度json值

debugcn 发表于 Dev

麦可

我是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.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"}

调试说明在这里

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

当我在网站上发出警报时，联系人不会显示我的价值。警报（this.data.acn）; //显示值为22222 alert（“ contact person =” + 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],
                         }, ),

西瓦库玛·塔迪斯蒂（Sivakumar Tadisetti）

您指的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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-04-5

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章