以 angular 反应形式绑定表格数组值

Question

I have a update form in which i want to bind feilds of form array. There are 2 fields in form array. One of them is drop down while the other is text field. I want to make drop down value non editable while input tag value as editable.

here is my component.html

    <hello name="{{ name }}"></hello>
    <form [formGroup]="editForm" (ngSubmit)="onSubmit(editForm.value)">
    <div class="form-group row">
    <label class="col-sm-2 col-form-label">Employees</label>
    <div class="col-sm-10 txt-box empInfoBg">

        <div formArrayName="CoordinatesInfo">
            <div *ngFor="
                  let itemrow of employeeArray['controls'];
                  let i = index
                " [formGroupName]="i">
                <div class="form-group row">

                    <label class="col-sm-2 col-form-label"
                    >Employee Name</label>
                    <div class="col-sm-8 txt-box">

                        <select
                      (change)="onChangeEmp($event.target.value)"
                      type="number"
                      class="form-control"
                      formControlName="CoordinateId"
                    >
                      <option hidden value=""
                        >Please Select Employee
                      </option>
                      
                      <option
                        *ngFor="
                          let emp of employeeArray;
                          let empIndex = index
                        "
                        type="number"
                        
                        [ngValue]="
                          empControlElementOfArray(empIndex).get(
                            'CoordinateId'
                          ).value
                        "
                      >                          
                        {{ emp.CoordinateName }}
                      </option>
                      
                    </select>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-sm-2 col-form-label"
                    >Age</label>
                    <div class="col-sm-8 txt-box">
                        <input

                      name="nnnn"
                      type="text"

                      onkeypress="return (event.charCode !=8 && event.charCode ==0 || 
                  (event.charCode >= 48 && event.charCode <= 57))"
                      formControlName="Age"
                      class="form-control"
                      placeholder="Please Enter Age"
                    />
                  </div>

                        <div class="col-md-2">
                            <button
                      type="button"
                      *ngIf="
                        editForm.get('CoordinatesInfo')[
                          'controls'
                        ]
                      "
                      (click)="deleteRow(i)"
                      class="a-btns btn btn-success tab-btn"
                    >Delete
                      <i class="fa fa-trash" aria-hidden="true"></i>
                    </button>
                        </div>
                    </div>
                    <hr />
                </div>
            </div>
            <div class="row">

                <div class="addButton">
                    <button
                  type="button"
                  (click)="addNewRow()"
                  class="a-btns btn btn-success tab-btn"
                >
                  Add Emp
                  <i class="fa fa-plus" aria-hidden="true"></i>
                </button>
                </div>

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

here is my component.ts file

   editForm: FormGroup;
   constructor(
   private fb: FormBuilder,
   private http: HttpClient,
   private router: Router,
   private route: ActivatedRoute
 ) {}

response = {
Id: 73,
EmpName: "Rajesh",
CoordinatesInfo: [
  { CoordinateId: 36, CoordinateName: "Nisha", Age: 25 },
  { CoordinateId: 37, CoordinateName: "nidhi", Age: 29 }
]
};

ngOnInit() {
this.editForm = this.fb.group({
  CoordinatesInfo: this.fb.array([])
});
this.empInfo();
}
empInfo() {
console.log(this.response);
this.response.CoordinatesInfo = this.response.CoordinatesInfo.map(el => {
  var o = Object.assign({}, el, { isdisabled: true });
  this.employeeArray.push(
    this.initPrefilledEmpRow(el.CoordinateId, el.Age)
  );
  console.log(this.employeeArray);
  return o;
});
}

initBlankEmpRow() {
return this.fb.group({
  CoordinateId: [""],
  Age: ["", [Validators.required]]
});
}

initPrefilledEmpRow(CoordinateId: number, Age: number) {
return new FormGroup({
  CoordinateId: new FormControl({
    value: CoordinateId,
    Validators: Validators.required,
    disabled: true
  }),
  Age: new FormControl({
    value: Age,
    Validators: Validators.required,
    disabled: true
  })
});
}

 get employeeArray(): FormArray {
const name = this.editForm.get("CoordinatesInfo") as FormArray;

return name;
 }

 empControlElementOfArray(index: number) {
const arrayElem = this.employeeArray.get(index.toString()) as FormGroup;
return arrayElem;
}

initItemRows() {
return this.fb.group({
  CoordinateId: [""],
  Age: ["", [Validators.required]]
 });
 }

addNewRow() {
this.employeeArray.push(this.initItemRows());
}
deleteRow(index: number) {
this.employeeArray.removeAt(index);
}

Here is my stackblitz link

https://stackblitz.com/edit/angular-nfmavt?file=src/app/app.component.ts

I don't know where i am missing. Am i doing something wrong?

Answer 1

You can use the property disabled to make the select disable. In your example:

                  <select
                      (change)="onChangeEmp($event.target.value)"
                      type="number"
                      class="form-control"
                      formControlName="CoordinateId"
                      [attr.disabled]="true"
                    >

You can change the "true" value for a variable and you can control the disable of this field.

Answer 2

You can disable the field when creating the form group.

Eg:

initItemRows() {
return this.fb.group({
  CoordinateId: { value: "", disabled: true },
  Age: ["", [Validators.required]]
 });
 }