如何将* ngif用于[值]？

Question

I have below html code for add business page in ionic 3. Where I'm getting input data using [(ngModel)]="businessData.name" . For editing the business I used same page where I'm filling all inputs with [value]="savedbusinessData.name" whichever data is getting through mybusiness api like business name or email etc. But now editing business is working fine but when new user go to add business page I'm getting ERROR TypeError: Cannot read property 'name' of undefined because of [value]="savedbusinessData.name" . For solving this I tried *ngIf="!savedbusinessData == ''" using this input got disappear. So how can I use ngif here or any other solution?

<ion-content padding>
    <div class="addbusiness">

        <ion-item>
            <p (click)="addCata()">Select Category</p>
                <!-- <p class="adedcat">{{htmlContent}}</p> -->
                <ion-tags-input  [separatorStr]="','" [once]="'true'" [canBackspaceRemove]="false" [canEnterAdd]="false" [(ngModel)]="catatags" (onChange)="onChange($event)"></ion-tags-input>
            <!-- <p (click)="clearcat()">Clear All</p> -->
        </ion-item>

       <ion-item> 
        <ion-input *ngIf="!savedbusinessData == ''" [value]="savedbusinessData.name" [(ngModel)]="businessData.name" type="text" placeholder="Name"></ion-input>
       </ion-item>
       <ion-item> 
        <ion-input  [value]="savedbusinessData.contact" [(ngModel)]="businessData.contact" type="number" placeholder="Contact Number"></ion-input>
       </ion-item>
       <ion-item> 
        <ion-input  [value]="savedbusinessData.address" [(ngModel)]="businessData.address" type="text" placeholder="Adress"></ion-input>
      </ion-item>
       <ion-item> 
        <ion-input  [value]="savedbusinessData.website" [(ngModel)]="businessData.website" type="text" placeholder="Website"></ion-input>
      </ion-item>
        <ion-item> 
        <ion-input  [value]="savedbusinessData.email" [(ngModel)]="businessData.email" type="email" placeholder="Email"></ion-input>
      </ion-item>
        <ion-item> 
        <ion-input  [value]="savedbusinessData.about" [(ngModel)]="businessData.about" type="text" placeholder="About"></ion-input>
      </ion-item>
        <ion-item> 
        <ion-input  [value]="tags" [(ngModel)]="businessData.tags" type="text" placeholder="Tags"></ion-input>
      </ion-item>         
        <button class="busiadd" (click)="addBusiness()" ion-button>Submit</button>

  </div>
</ion-content>

Answer 1

I highly recommend using Angulars reactive forms. Import ReactiveFormsModule in the related module. Remove all [(ngModel)] s and put all input s in a form tag like this

<form [formGroup]="myForm" (ngSubmit)="save(myForm.value)"></form>

Then remove the [value] properties. Add a formControlName="name" / "contact" etc. to the input tags. In your TS create it as follows

myForm: FormGroup;

constructor(private fb: FormBuilder) {
  this.myForm = this.fb.group({
    name: '',
    contact: '',
    // ...etc
  });
}

When your data arrives you can simply patch the form with

this.myForm.patchValue(data);

It patches only matching attributes. Others will be ignored. Also don't forget to create a save function from where you can handle the form data.

function save(formData: YourDataType) {
  // handle formData here
}

Answer 2

Use ?. for null check.

[value]="savedBusinessData?.name"

If you want to hide the input use..

<ion-item *ngIf="savedBusinessData !== undefined">
  <ion-input [value]="savedBusinessData?.name"></ion-input>
</ion-item>