In angular cli v13 and angular material v13, getting double stars .

[suchetadxc]

Description

Hi,

I am upgraded my angular application from angular v9 to angular v13 and all other angular frameworks in the app, step by step.

Commands used were -

npx @angular/cli@11 update @angular/core@11 @angular/cli@11  --allow-dirty --force

npx @angular/cli@11 update @angular/material@11 --allow-dirty --force

======================= Till angular material v12, the application UI looked same. However, for angular cli v13 and angular material v13, there are double stars on mandatory fields (.i.e. 'required' fields) selected for a particular section.

And when we downgrade the material version of angular keeping rest all version the same to angular material v12, a star disappear. And the UI is alright.

package.json file (one with the error)-

"dependencies": { "@angular-devkit/schematics": "^13.3.1", "@angular/animations": "^13.3.1", "@angular/cdk": "^13.3.2", "@angular/common": "~13.3.1", "@angular/compiler": "~13.3.1", "@angular/core": "^13.3.1", "@angular/forms": "~13.3.1", "@angular/material": "^13.3.2", "@angular/material-moment-adapter": "^13.3.2", "@angular/platform-browser": "~13.3.1", "@angular/platform-browser-dynamic": "~13.3.1", "@angular/router": "~13.3.1", "@azure/msal-angular": "^0.1.2", "@ng-bootstrap/ng-bootstrap": "^5.1.0", "@ngx-translate/core": "^11.0.1", "@ngx-translate/http-loader": "^4.0.0", "@types/xrm": "^9.0.7", "angular-xslt": "^0.2.1", "angular2-notifications": "^9.0.0", "aws-sdk": "^2.520.0", "bootstrap": "^4.3.1", "core-js": "^2.5.4", "corsproxy": "^1.5.0", "crypto-js": "^3.1.9-1", "exceljs": "^3.6.1", "file-saver": "^2.0.2", "flag-icon-css": "^3.3.0", "hammerjs": "^2.0.8", "jquery": "^3.6.0", "jwt-decode": "^2.2.0", "material-design-icons": "^3.0.1", "mime-types": "^2.1.24", "moment": "^2.24.0", "ngx-cookie": "^4.1.2", "ngx-papaparse": "^4.0.4", "popper.js": "^1.15.0", "process": "^0.11.10", "qz-tray": "^2.0.9", "regenerator-runtime": "^0.13.3", "rsvp": "^4.8.5", "rxjs": "~6.5.5", "rxjs-compat": "^6.5.2", "sanitize-html": "^1.20.1", "sha.js": "^2.4.11", "stream": "0.0.2", "timers": "^0.1.1", "underscore": "^1.9.1", "util": "^0.12.4", "ws": "^7.0.0", "xlsx": "^0.15.2", "xml-js": "^1.6.11", "zone.js": "~0.11.4" }, "devDependencies": { "@angular-devkit/build-angular": "^13.3.1", "@angular-devkit/core": "^13.3.1", "@angular/cli": "^13.3.1", "@angular/compiler-cli": "~13.3.1", "@angular/language-service": "~13.3.1", "@nguniversal/express-engine": "^8.1.1", "@types/file-saver": "^2.0.1", "@types/jasmine": "~3.6.0", "@types/jasminewd2": "~2.0.3", "@types/jwt-decode": "^2.2.1", "@types/node": "^12.11.1", "codelyzer": "^6.0.0", "grunt": "^1.0.4", "grunt-bump": "^0.8.0", "inquirer": "^7.0.0", "jasmine-core": "~3.5.0", "jasmine-spec-reporter": "~5.0.0", "karma": "~6.3.17", "karma-chrome-launcher": "~3.1.0", "karma-coverage-istanbul-reporter": "~3.0.2", "karma-jasmine": "~4.0.0", "karma-jasmine-html-reporter": "^1.5.0", "pm2": "^4.1.2", "protractor": "~7.0.0", "tasksfile": "^5.1.0", "ts-node": "~7.0.0", "tslib": "^2.3.1", "tslint": "~6.1.0", "typescript": "~4.6.3" }

I would like to ask would downgrading particularly, material v from 13 to 12 only would resolve the issue or shall downloading the entire angular framework dependencies and devDependencies version to 12 only would resolve the issue.

What is the affected URL?

No response

Please provide the steps to reproduce the issue

No response

Please provide the expected behavior vs the actual behavior you encountered

No response

Please provide a screenshot if possible

Please provide the exception or error you saw

No response

Is this a browser-specific issue? If so, please specify the device, browser, and version.

No. The issue is not browser specific.

[volvachev]

Hi, this is the new default behaviour in form field. I think you have added your own asterisk to the template, it just needs to be removed.

If a form field control is marked with a required attribute, an asterisk will be added to the marker to indicate that it is a required field. If this is undesirable, this can be disabled by setting the hideRequiredMarker property to <mat-form-field>.

[crisbeto]

The explanation from @volvachev sounds like the likely root cause. Closing the issue, but it can be reopened if new information comes up.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}