Javascript 角度-获取表单数组的用户输入

我正在尝试在我的angular应用程序上创建一个表单，将用户输入的电话号码存储到表单数组中。用户还可以根据需要动态添加更多电话号码

但是，当我在区域、前缀和行字段中输入数据时，什么都不会发生。我得到的只是空值。这是我的html

<form [formGroup] = "contactForm" class="mainForm" (ngSubmit)="submitHandler()" style="background-color: white;">
 Value: {{contactForm.value | json }}   <!---- -->

    <hr>

    <mat-form-field class="full">
        <input matInput placeholder="firstName" formControlName="firstName">

        <mat-error *ngIf="firstName.invalid" style="margin-right: 1em;">
            Please enter your first name
        </mat-error>
    </mat-form-field>
    <br>
    <mat-form-field class="full">
        <input matInput placeholder="lastName" formControlName="lastName" style="margin-left: 1em">

        <mat-error *ngIf="lastName.invalid">
            Please enter your last name
        </mat-error>
    </mat-form-field>
<br>
    <mat-form-field class="full">
        <input matInput placeholder="email" formControlName="email">

        <mat-error *ngIf="email.invalid">
            Please enter a valid email address
        </mat-error>
    </mat-form-field>
    <br>
    <div>
        <mat-form-field appearance="fill">
            <mat-label>Select an option</mat-label>
            <mat-select type= "[(value)]" formControlName="type" aria-placeholder="type">
              <mat-option value="Residential">Residential Services</mat-option>
              <mat-option value="Business">Business Services</mat-option>
            </mat-select>
          </mat-form-field>
          
    </div>
    <br>

    <mat-form-field class="full">
        <mat-label>add some details about your inquiry</mat-label>
        <textarea matInput placeholder="inquiry" formControlName="inquiry"></textarea>
        <mat-error *ngIf="inquiry.invalid">
            Please enter some details about your inquiry
        </mat-error>
    </mat-form-field>

    <div fromArrayName="phones">
        <div *ngFor="let phone of phoneForms.controls; let i=index" [formGroupName]="i">
            <mat-form-field>
                <input matInput placeholder="area" formControlName="phones" area = "[(value)]">
            </mat-form-field>
            <mat-form-field>
                <input matInput placeholder="prefix" formControlName="prefix" prefix = "[(value)]">
            </mat-form-field>
            <mat-form-field>
                <input matInput placeholder="line" formControlName="line" line = "[(value)]">
            </mat-form-field>
            
            <button mat-raised-button color="warn" (click)="deletePhone(i)">Delete</button>


        </div>
    </div>

    <button mat-raised-button color="primary" (click)="addPhone()">Add Phone Number</button>
   
    <hr>

    <button mat-raised-button [disabled] = "contactForm.invalid" color="primary" type="submit">Submit</button>
</form>
</div>

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormArray } from '@angular/forms';
import { AngularFirestore } from 'angularfire2/firestore';

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.scss']
})
export class FormComponent implements OnInit {

    contactForm: FormGroup;

    loading = false;
    success = false;

  constructor(private fb: FormBuilder, private afs: AngularFirestore) { }

  ngOnInit(): void {
    this.contactForm = this.fb.group({
      firstName:['',[
        Validators.required,
        Validators.minLength(2),
        Validators.maxLength(18)
      ]],
      lastName:['',[
        Validators.required,
        Validators.minLength(2),
        Validators.maxLength(18)
      ]],
      email:['',[
        Validators.required,
        Validators.email
      ]],
      type:['',[
        Validators.required
      ]],
      inquiry:['',[
        Validators.required,
        Validators.minLength(2),
        Validators.maxLength(200),
      ]],
      
      
      phones:this.fb.array([{ area: null, prefix: null, line: null } ])
    })
    this.contactForm.valueChanges.subscribe(console.log);
    
    }
    

  addPhone() {
    const phone = this.fb.group({
      area:[],
      prefix: [],
      line: [],
    })

    this.phoneForms.push(phone);
  }

  deletePhone(i) {
    this.phoneForms.removeAt(i);
  }

  get email(){
    return this.contactForm.get('email');
  }
  get firstName(){
    return this.contactForm.get('firstName');
  }
  get lastName(){
    return this.contactForm.get('lastName');
  }
  get inquiry(){
    return this.contactForm.get('inquiry');
  }
  get type(){
    return this.contactForm.get('type');
  }
  get phoneForms(){
    return this.contactForm.get('phones') as FormArray
}

  async submitHandler(){
    this.loading = true;

    const formValue = this.contactForm.value;

    try{
      await this.afs.collection('contacts').add(formValue);
      this.success = true;
    }
    catch(err){
      console.error(err);
    }
    this.loading = false;
  }
}

//when angular firestore2 and rxjs are imported entire page that holds this form module will not display or show any errors, also look at submit handler and removing private 
//method from constructor