如何正确使用mat-form-field获取输入值并解决边框异常

Hey there! Let's work through your mat-form-field issues together—both that unexpected border and how to properly grab input values from the component.

一、先搞定边框样式异常问题 #

From what you've described, that unwanted border is likely either from Angular Material's default appearance settings or a CSS conflict. Here are a few targeted fixes:

1. 确认Angular Material主题已正确引入 #

First things first—make sure you've added a prebuilt Angular Material theme to your global styles file (like styles.css or styles.scss). This is critical for component styles to render as expected:

@import "@angular/material/prebuilt-themes/indigo-pink.css";

2. 调整mat-form-field的外观属性 #

If your desired style is a more minimal look (like just an underline, no persistent outer border), add the appearance attribute to your mat-form-field:

<mat-form-field class="fullWidth" appearance="legacy">
  <input matInput formControlName="studentName" id="studentName" name="studentName" required>
</mat-form-field>
- `appearance="legacy"`：Gives you the classic underline-only style with a floating label on focus
- `appearance="fill"`：Adds a subtle filled background, with a border only on focus (softer than the default outline)

3. 用CSS彻底隐藏边框（如果需要） #

If the above doesn't fix it, you can override the outline styles directly. Replace your current CSS with this to hide the outline entirely:

.alignment .mat-form-field-outline {
  display: none !important;
}
/* Optional: Customize the underline if you want to keep it */
.alignment .mat-form-field-underline {
  background-color: #ccc; /* Pick your preferred color */
}

二、正确获取输入值 #

You're already on the right track using formControlName—here's how to tie it all together in your component to access the value:

1. Initialize your FormGroup in the component #

Make sure you've set up the form in your component class, including the studentName control with validation:

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

@Component({
  // Your component metadata here
})
export class YourComponent implements OnInit {
  form: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    // Set up the form with required validation for studentName
    this.form = this.fb.group({
      studentName: ['', Validators.required]
    });
  }

  // Example method to get the value (call this on submit or whenever you need it)
  getStudentName(): void {
    if (this.form.valid) {
      // Two ways to get the value:
      const nameOption1 = this.form.get('studentName')?.value;
      const nameOption2 = this.form.value.studentName;
      
      console.log('Student Name:', nameOption1);
      // Add your business logic here (like submitting to an API)
    }
  }
}

2. Update your template to connect the form #

Wrap your form elements in a <form> tag and bind it to your FormGroup to make everything work together:

<form [formGroup]="form" (ngSubmit)="getStudentName()">
  <div fxFlex="120px">
    <label class="studentName">Student Name</label>
    <sup class="red-color">*</sup>
  </div>
  <mat-form-field class="fullWidth" appearance="legacy">
    <input matInput formControlName="studentName" id="studentName" name="studentName" required>
    <!-- Uncomment this if you want to show error messages -->
    <!-- <app-error-message [control]="form.controls.studentName"></app-error-message> -->
  </mat-form-field>
  <button type="submit" [disabled]="!form.valid">Submit</button>
</form>

Quick Recap #

• For the border: Start with checking the theme import, adjust the appearance attribute, then use CSS overrides if needed.
• For getting values: Use the FormGroup you set up—either form.get('controlName')?.value or form.value.controlName will work once the form is valid.

内容的提问来源于stack exchange，提问作者krishna ram