如何在angular 6中创建响应式问题选项表单(数据来自服务)

ng generate service form-data

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class FormDataService {
  private apiUrl = 'https://api.example.com/options'; // 假设这是你的API端点

  constructor(private http: HttpClient) {}

  getOptions(): Observable<any[]> {
    return this.http.get<any[]>(this.apiUrl);
  }
}

ng generate component responsive-form

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { FormDataService } from '../form-data.service';

@Component({
  selector: 'app-responsive-form',
  templateUrl: './responsive-form.component.html',
  styleUrls: ['./responsive-form.component.css']
})
export class ResponsiveFormComponent implements OnInit {
  form: FormGroup;
  options: any[] = [];

  constructor(private fb: FormBuilder, private formDataService: FormDataService) {
    this.form = this.fb.group({
      option: ['', Validators.required]
    });
  }

  ngOnInit(): void {
    this.formDataService.getOptions().subscribe(data => {
      this.options = data;
    });
  }
}

<form [formGroup]="form">
  <label for="option">Choose an option:</label>
  <select formControlName="option" id="option">
    <option value="" disabled>Select an option</option>
    <option *ngFor="let option of options" [value]="option.value">{{ option.label }}</option>
  </select>
  <div *ngIf="form.get('option').invalid && (form.get('option').dirty || form.get('option').touched)">
    <div *ngIf="form.get('option').errors.required">Option is required.</div>
  </div>
</form>