angular http 类型错误：无法读取未定义的属性'get'

Question

EditComponent.ts

ngOnInit(): void {
this.itemIndex = this.route.snapshot.params.id;
this.editModu = this.itemIndex != null == true;
// subscription for dropdown images
this.apiPokemons.getPokedexs().subscribe(data => {

this.pokedex = data
});
if(this.editModu){
this.apiPokemons.getPokemon(this.itemIndex).subscribe((response: Pokemon) => {
// console.log(response)

this.pokemonAddForm = new FormGroup({
'username': new FormControl(response.pokemon,Validators.required),
gender: new FormControl(response.gender,Validators.required),
region: new FormControl(response.trainer_region,Validators.required),
birthDay: new FormControl(response.birth_year,Validators.required),
pokedexName: new FormControl(response.pokedexData,Validators.required)  
})
}); 
}else{
this.pokemonAddForm = new FormGroup({
'username': new FormControl("", [Validators.required,/*this.isValidUsername.bind(this)*/]), //not called it like required() we just passing the reference and angular will execute
'region': new FormControl("", Validators.required),
'gender': new FormControl("", Validators.required),
'birthDay': new FormControl("", Validators.required),
'pokedexName': new FormControl("", Validators.required),
})

}



//initiliazing the form

}

onSubmit() {
// let pokedexId = this.pokedex.findIndex(this.pokemonAddForm.get('pokedexName').value)
console.log(this.pokemonAddForm.get('pokedexName').value)
// console.log("pokedexID:"+pokedexId)
this.user = {
pokemon: this.pokemonAddForm.controls['username'].value,
gender: this.pokemonAddForm.get('gender').value,
trainer_region: this.pokemonAddForm.get('region').value,
birth_year: this.pokemonAddForm.get('birthDay').value,
pokedexData:this.pokemonAddForm.get('pokedexName').value
// this.pokedex[this.pokemonAddForm.get('pokedexName').value]
// console.log(this.pokedexData)

}
console.log("the user")
console.log(this.user)
//update the user
if (this.editModu) {
this.apiPokemons.upDatePokemon(this.itemIndex, this.pokemonAddForm.value)
this.toast.open('successfully updated Pokemon')

}
//add the userdata to service
else {
console.log('adding the data')
this.apiPokemons.addPokemon(this.user);
this.toast.open('successfully added new Pokemon')

}
// reset form
this.pokemonAddForm.reset()
// redirect to home
this.router.navigate(['/pokemons'])
}

ApiService.ts

upDatePokemon(id:number, updatePokemon:Pokemon){
// updatePokemon.id = id;
const headers = new HttpHeaders()
.append('Content-Type' , 'application/json');
console.log(`${this.pokemonsPath}${id}/`)
return this.http.patch(`${this.pokemonsPath}${id}/`, updatePokemon, {headers:headers}).subscribe((data)=>{
console.log(data)
})

错误图像

在数据检索之前，它正在运行并给出错误

<span *ngIf="!pokemonAddForm.get('username').valid && pokemonAddForm.controls['username'].touched && isLoading">
<span *ngIf="pokemonAddForm.get('username').errors['anAllowdUserName']">Already Exists userName!</span>
<span *ngIf="pokemonAddForm.get('username').errors['required']">Please Enter valid Name!</span></span>

form.html

<form  [formGroup]="pokemonAddForm" (ngSubmit)="onSubmit()" >
<div id="user-data">
<div class="form-group">
<label for="username">Pokeman Name</label>
<input type="text" id="username" class="form-control"   name="name"
formControlName='username'>
<span *ngIf="!pokemonAddForm.get('username').valid && pokemonAddForm.controls['username'].touched && isLoading">
<span *ngIf="pokemonAddForm.get('username').errors['anAllowdUserName']">Already Exists userName!</span>
<span *ngIf="pokemonAddForm.get('username').errors['required']">Please Enter valid Name!</span></span>
</div>
<div class="form-group">
<label for="text">Trainer Region</label>
<input type="text" id="text" class="form-control" ngDefaultControl formControlName='region' name="country">
<span *ngIf="!pokemonAddForm.get('region').valid && pokemonAddForm.get('region').touched">
Please Enter your Region!
</span>
</div>
</div>
<div class="form-group">
<label for="gender">Gender</label>
<select id="gender" class="form-control"  formControlName='gender' name="option">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>

</div>
<div class="form-group">
<label for="date">Birth Date</label>
<input type="date" id="text" class="form-control"  formControlName='birthDay' name="date">
<span *ngIf="!pokemonAddForm.get('birthDay').valid && pokemonAddForm.get('birthDay').touched ">
enter Your BirthDay please
</span>
</div>
<!-- file input -->
<div class="form-group">
<mat-form-field>
<mat-label>Choose your Favourite pokedex</mat-label>
<mat-select formControlName='pokedexName'>
<mat-option>Choose your Favourite pokedex</mat-option>
<mat-option *ngFor="let pk of pokedex" [value]="pk.id"  >
<img [src]='pk.imagePath' width="100px" height="80px"> {{pk.name}}
</mat-option>
</mat-select>
</mat-form-field>
<span *ngIf="!pokemonAddForm.get('pokedexName').valid && pokemonAddForm.get('pokedexName').touched">
Please Select your Favourite Pokedex
</span>
</div>
<button class="btn btn-primary form-control " type="submit" [disabled]='!pokemonAddForm.valid'>Add Pokemon</button>
</form>

在表单呈现的API中检索数据之前，我无法仅返回旧表单并发送服务就获得在表单中进行更改的数据。我该怎么处理？

Answer 1

您构建表单太晚了。或者在你的模板中添加空检查，比如：

*ngIf="!pokemonAddForm?.get('username').valid 

访问模板中表单的任何位置。。或者把所有东西都包起来如果。。。

<ng-container *ngIf="pokemonAddForm">
<!-- all other content -->
</ng-container>

或者更早地构建表单(在构造函数中(，然后用响应填充它。。。

constructor(/* injections */) {
this.pokemonAddForm = new FormGroup({
'username': new FormControl("", [Validators.required,/*this.isValidUsername.bind(this)*/]), //not called it like required() we just passing the reference and angular will execute
'region': new FormControl("", Validators.required),
'gender': new FormControl("", Validators.required),
'birthDay': new FormControl("", Validators.required),
'pokedexName': new FormControl("", Validators.required),
})
}
ngOnInit() {
this.itemIndex = this.route.snapshot.params.id;
this.editModu = this.itemIndex != null == true;
// subscription for dropdown images
this.apiPokemons.getPokedexs().subscribe(data => {

this.pokedex = data
});
if(this.editModu){
this.apiPokemons.getPokemon(this.itemIndex).subscribe((response: Pokemon) => {
// console.log(response)

this.pokemonAddForm.reset({
'username': response.pokemon,
gender: response.gender,
region: esponse.trainer_region,
birthDay: response.birth_year,
pokedexName: response.pokedexData,
})
}); 
}
}