角度http TypeError：无法读取未定义的属性'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)
        })

error image

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

 <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 

您在模板中访问表单的任何地方.. 或将所有内容包装在一个大的 ngIf 中...

<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,
        })
      }); 
    }
  }