I have got a data model in Angular like this:

`

export interface Task {
  id: number;
  taskName: String;
  description: String;
  isDone: boolean;
  taskDate: Timestamp<any>;
  group: {
    id: number,
    taskGroupName: String;
  };
}

`

and I tried to make an input in Angular html file to create request, which will be used later with POST method for adding new Tasks. But I encountered some problems. Default input works well with id, taskName etc. When it comes to group-object group.id and group.taskGroupName it depends error, and value is undefined.

`

<input ngModel="{{modelAdd.group?.id}}" name="group.id"  id="inputgroupb2" aria-describedby="title" placeholder="taskgroupId">

`

modelAdd: Partial<Task> = {};              (from ts file)

1. How to create input to group in this case and save group values into that model. I wanna get values from user, save to modelAdd and later send it as a request for backened.
2. Additionalny I want to add that if I tried to read data in this way, it works fine: So why, i cannot write it in the same way?

`

<div *ngFor="let task of tasks">
  <div>{{task.id}} {{task.taskName}} {{task.taskDate}} {{task.isDone}}  {{task.group.id}} {{task.group.taskGroupName}}</div>
</div>

`

Thank you for some help!

CodePudding user response：

How are you building the form? What I usually do for nested forms is add the nested peice after making the original form. My example is below.

Setting Up Form

this.myform = this.fb.group({
  email: ['', Validators.required, Validators.email],
  phones: this.fb.array([])
})

Adding nested form

addPhone() {
  const phone = this.fb.group({
  area: [],
  prefix: [],
  line: []
})
this.phoneForms.push(phone);
}

CodePudding user response：

Thank you for help. But my form is basic and looks like this:

<!--  MODAL WINDOW ADD-->
  <div  id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div  role="document">
      <div >
        <div >
          <form #addForm="ngForm">
            <h5  id="exampleModalLabel">Edit task group with Id: <b>{{modelAdd.id}}</b></h5>
            <div >
<!--              <label for="inputTaskName2"></label>-->
              <input type="text" ngModel="{{modelAdd.taskName}}" name="taskName"  id="inputTaskName2" aria-describedby="title" placeholder="Task name">
<!--              <input type="text" ngModel="{{modelAdd.taskDate}}" name="taskDate"  id="inputTaskDate2" aria-describedby="title" placeholder="Task date">-->
              <input ngModel="{{modelAdd.group?.id}}" name="group.id"  id="inputgroupb2" aria-describedby="title" placeholder="taskgroupId">
<!--              <input type="text" ngModel="{{modelAdd.group?.taskGroupName}}" name="taskGroupName"  id="inputgroupa2" aria-describedby="title" placeholder="taskGroupName">-->
<!--              <input type="text" ngModel="{{modelAdd.description}}" name="description"  id="inputTaskdescription2" aria-describedby="title" placeholder="Task description">-->
<!--              <input  name="id" ngModel="{{modelAdd.id}}" id="id" [defaultValue]="modelAdd.id" type="hidden">-->
            </div>
            <div >
              <button type="button" id="" data-dismiss="modal" >Close</button>
              <button (click)="onAddTask(addForm.value)" data-dismiss="modal"  >Save changes</button>

            </div>
          </form>
        </div>
      </div>
    </div>
  </div>

I tried to save values to modelAdd: Partial = {}; which is based on data model from first message. Is it possible to do it this way? I can't understand why I can read data and show it on screen using {{ <div *ngFor="let task of tasks"> {{task.group.id}} {{task.group.taskGroupName}}}}, but I cant write it to variable/object same way.