我想发布自动填充材料中的数据 我的ts代码,像这样。我使用了registerUserForm formgroup。
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?或者,解决方案。
答案 0 :(得分:0)
你的代码是混乱的。
首先,将所有内容分组为一个表单。
int
然后,仅将您的表单实例化,您不需要再执行此操作。
registerUserForm: FormGroup;
接下来,使用getter来获取您的国家/地区。 (这是众多方式之一)
constructor() {
this.registerUserForm = this.fb.group({
username: ['', [Validators.required, Validators.minLength(5)]],
country_id: ['', Validators.required],
email: ['', [Validators.required, ValidationService.emailValidation]],
myControlCountry: ''
});
}
现在您必须将其绑定到HTML:
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;
}