Question

在我的项目中，我想对国家/地区使用素材自动填充功能。国家从我的ws获得所有。我能够显示所有状态，但我想要的是选择发送ws的状态。所以，我想把它放在formgroup中。

component.html

<form [formGroup]="registerUserForm" (ngSubmit)="onRegisterUser()" class="col s12" materialize>

  <div class="row">
    <div class="input-field col s12">
      <input formControlName="username" id="username" type="text" class="validate" placeholder="Enter Username" minlength="3" maxlength="20"
        required="" [ngClass]="{invalid: invalidInputs}">
    </div>
  </div>

  <div class="row">
    <div class="input-field col s12">
      <input formControlName="email" id="email" type="email" class="validate" placeholder="Enter Email" required="" aria-required="true"
        [ngClass]="{invalid: invalidInputs}">
    </div>
  </div>

  <!-- Autocomplete Country Material-->

  <input formControlName="country_id" id="country_id" matInput placeholder="Select Country" aria-label="State" [matAutocomplete]="auto"
    autoActiveFirstOption [formControl]="myControlCountry">
  <mat-autocomplete #auto="matAutocomplete">
    <mat-option *ngFor="let country of filteredOptionsCountry | async" [value]="country.name">
      {{ country.name }}
    </mat-option>
  </mat-autocomplete>

 <!-- End Autocomplete Country -->


  <div id="register_user_button_container" class="row">
    <button id="register_user_button" type="submit" class="btn waves-effect waves-light">
      Register
    </button>
    <button id="cancel_button" (click)="onCancel()" class="btn waves-effect waves-light grey lighten-4 black-text">
      Cancel
    </button>
  </div>
</form>

component.ts

导出类AddUserFormComponent实现OnInit { countryes：国家[];

  registerUserForm: FormGroup;


  filteredOptionsCountry: Observable<Country[]>;
  myControlCountry: FormControl = new FormControl();



  constructor(private fb: FormBuilder,
    private router: Router,

    private cs: CountryService) 
{

    this.registerUserForm = new FormGroup({
      'username': new FormControl(),
      'email': new FormControl(),
      'country_id': new FormControl(),
    });

  }

  ngOnInit() {

    this.registerUserForm = this.fb.group({
      'username': ['', Validators.compose([Validators.required, Validators.minLength(5)])],
      'country_id': ['', Validators.required],
      'email': ['', [Validators.required, ValidationService.emailValidation]],
    });

    this.filteredOptionsCountry = this.myControlCountry.valueChanges.pipe(
      startWith(''),
      map(val => this.filterCountry(val))
    );

    this.cs.getAllCountry().subscribe(
      countryes => {
        this.countryes = countryes.map((country) => {
          return new Country(country);
        });
      }
    );

  }

  onRegisterUser() {
    this.loading = true;
    this.invalidInputs = true;

    let newUser = new User(
      this.registerUserForm.value
    );

    this.userService.createUser(newUser).subscribe(
    );
  }

  onCancel() {
    this.router.navigate(['/main/users']);
  }


  //Country

  filterCountry(val: string): Country[] {
    if (val) {
      let filterValue = val.toLowerCase();
      console.log(this.countryes)
      return this.countryes.filter(country => country.name.toLowerCase().startsWith(filterValue));
    }

    return this.countryes;
  }

}

在html代码中，我也使用formControlName =“country_id”id =“country_id”，但不能正常工作。更重要的是，我使用和ReactiveFormsModule。你能建议我解决一下吗？谢谢！

Answer 1

解决方案：

Html代码：

  <div class="row">
    <div class="input-field col s12">
      <input formControlName="country_id" id="country_id" matInput placeholder="Select Country*" aria-label="State" [matAutocomplete]="auto"
        autoActiveFirstOption [formControl]="country_id">
      <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayWith">
        <mat-option (onSelectionChange)="updateForm($event, country.country_id, 'country_id')" *ngFor="let country of filteredOptionsCountry | async"
          [value]="country.name">
          {{ country.name }}
        </mat-option>
      </mat-autocomplete>
    </div>
  </div>

Ts代码：

export class AddUserFormComponent implements OnInit {
  countryes: Country[];
  registerUserForm: FormGroup;
  areWeWaiting = false;
  countryid = 0;

  filteredOptionsCountry: any;
  country_id: FormControl = new FormControl();
  constructor(private fb: FormBuilder,
    private router: Router,
    private cs: CountryService,
 {
    this.registerUserForm = new FormGroup({
      'country_id': new FormControl(),
       });
  }

  ngOnInit() {

    this.filteredOptionsCountry = this.country_id.valueChanges.pipe(
      startWith(''),
      map(val => this.filterCountry(val))
    );

    );

    this.cs.getAllCountry().subscribe(
      countryes => {
        this.countryes = countryes.map((country) => {
          return new Country(country);
        });
      }
    );
  }

  onRegisterUser() {
    this.areWeWaiting = true;
    let newUser = this.registerUserForm.value
    newUser.country_id = this.countryid;
    let user = new User(newUser);
    this.userService.createUser(user).subscribe(
      result => {
        if (result === true) {
          Materialize.toast('User saved successfully', 4000);
        } else {
          this.areWeWaiting = false;
        }
      },
      error => {
        this.areWeWaiting = false;
       }
      );
  }

  //Country

  filterCountry(val: string): Country[] {
    if (val) {
      let filterValue = val.toLowerCase();
      console.log(this.countryes)
      return this.countryes.filter(country => country.name.toLowerCase().startsWith(filterValue));
    }
    return this.countryes;
  }



  updateForm(ev: any, idd: any, componentid: any) {

    if (ev.isUserInput) {
      if (componentid === 'country_id') {
        this.countryid = idd;
        this.registerUserForm['controls']['country_id'].setValue(ev.source.value);
      }  else {
        console.log('ooops');
      }
    }
  }
  displayWith(value: any): string {
    return typeof value === 'string' ? value : (value == null ? '' : value.text);
  }
}

Answer 2

我们可以使用“控件”从表单组获取formControName的值

解决方案：

HTML代码：

<form [formGroup]="SearchForm">
<mat-form-field fxFlex="14" appearance="outline">
    <mat-label>Number</mat-label>
    <input type="text"
           aria-label="Number"
           matInput
           formControlName="numberName"
           [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
        {{option}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

ts代码：

SearchForm = new FormGroup
({
numberName: new FormControl(''),
numers: new FormControl('')
}); 
Options: string[] = ['One', 'Two', 'Three'];
filteredOptions: Observable<string[]>;

constructor(){}
ngOnInit(){
this.onValueChanged();
}

public onValueChanged(){
this.filteredOptions = this.SearchForm.controls.numberName.valueChanges.pipe(
startWith(''),
map((value:any) => this._filter(value)));
}

private _filter(value: string): string[]{
const filterValue = value.toLowerCase();
return this.Options.filter(option => option.toLowerCase().includes(filterValue));
}

FormGroup中的材料自动完成 - 打字稿

2 个答案: