I'm having trouble with my select element, when I add the formControlName then -- Select Event Type -- doesn't show up anymore (but is still selected in the dropdown). If I remove it, it displays but doesn't validate of course.
This guy has the same issue here, but the answer does not work for me: Adding formControlName makes the default value disappear in my form's dropdown in Angular
<select class="form-control" name="type" id="type" formControlName="type" [appValidatedInputControl]="form.get('type')"> <option [value]="" disabled selected>-- Select Event Type --</option> <option *ngFor="let type of (eventTypes$ | async)" [value]="type">{{ 'eventType.' + type | translate}}</option> </select> TS file
export class EventCreationFormComponent implements OnInit { @Input() form: FormGroup; //... The parent HTML component where the form is injected:
<app-event-creation-form [form]="form"></app-event-creation-form> Parent component TS file
export class EventCreationComponent implements OnInit, OnDestroy { form: FormGroup; //... constructor(private fb: FormBuilder){ this.initForm(); //... } initForm() { this.form = this.eventCreationService.createForm(); const { type, tags } = this.form.controls; this.subs.sink = type.valueChanges.subscribe((typeValue) => { if (typeValue && (tags.untouched || !tags.value || !tags.value.length)) { tags.patchValue([{ value: typeValue, display: typeValue }]); } }); //... } The EventCreationService:
@Injectable() export class EventCreationService implements OnDestroy { constructor(private fb: FormBuilder) {} createForm(): FormGroup { return this.attachEventHandlers(this.fb.group( { type: [undefined, [Validators.required]], //... Did I miss something?
