I am working on Angular project, in this form is generated using reactive form.
For now initially I am adding one field by default on the form. This is the code to add the data :
this.objectFields.push(this._formBuilder.group({
fieldLabel: [{ value: 'name', disabled: true }, Validators.required],
fieldType: [{value: 'text', disabled: true}, Validators.required],
fieldName: [{ value: 'name', disabled: true }],
dataSet: [],
required: [{ value: true, disabled: true }],
displayInGrid: [{ value: true, disabled: true }]
}));
As initially the method to insert data is called it only adding :
dataSet: null
Remaining fields are not getting added to the form group.
If I add this as :
this.objectFields.push(this._formBuilder.group({
fieldLabel: ['name', Validators.required],
fieldType: ['text', Validators.required],
fieldName: ['name'],
dataSet: [],
required: [true],
displayInGrid: [true]
}));
The HTML code
<div fxLayout="column" fxLayoutGap="5px" fxFlex="35%" class="detail-form-column">
<mat-form-field appearance="outline">
<mat-label>Field Type</mat-label>
<mat-select formControlName="fieldType" required>
<!-- <mat-option value="">Select</mat-option> -->
<mat-option value="short-text">Short Text</mat-option>
<mat-option value="long-text">Long Text</mat-option>
<mat-option value="extended-text">Extended Text</mat-option>
<mat-option value="date">Date</mat-option>
<mat-option value="number">Number</mat-option>
<mat-option value="checkbox">Checkbox</mat-option>
i.e. without object of value and disabled attribute, then its working fine.
Why the form group not adding the object with value and disabled object?