从自动完成材料打字稿中发布空值

Question

我想发布来自自动完成材料的数据。
我的 ts 代码，像这样。我使用了 registerUserForm 表单组。

export class AddUserFormComponent implements OnInit {

  countryes: Country[];

  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 代码。在这段代码中，我有 3 个参数，只有我可以发布的电子邮件和用户名，country_id 发布为空

 <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>

你能建议我，如何在 registerUserForm 中使用这个 FormControl 吗？或者，一些解决方案。

Answer 1

您的代码非常混乱。

首先，将所有内容分组到一个表单中。

registerUserForm: FormGroup;

然后，只实例化你的表单一次，你不需要再做更多了。

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

接下来，使用 getter 获取您的国家/地区。 （这是众多方法之一）

countries: Country[];

get filteredCountries() {
  const query = this.registerUserForm.get('country_id').value;
  return query ? 
    this.countries.filter(c => c.name.toLowerCase().includes(query.toLowerCase)) : 
    this.countries;
}

现在你必须将它绑定到你的 HTML 中：

<mat-option *ngFor="let country of filteredCountries" [value]="country.name">
  {{ country.name }}
</mat-option>